|
1 2 3 4 5 6 7 8 |
<fieldset class="form-left-wrap ticket_file_wrapper"> <!-- любой html --> <div class="line"> <div id="my-dropzone"></div> <div class="dropzone_title dz-clickable"><strong>+</strong><span>bnr_h.jpg</span></div> </div> <input name="f" type="file"> </fieldset> |
|
1 2 3 4 5 6 7 8 9 10 |
$(".ticket_file_wrapper [type=file]").on("change", function(){ // Name of file and placeholder var file = this.files[0].name; var dflt = $(this).attr("placeholder"); if($(this).val()!=""){ $('.ticket_file_wrapper .dz-clickable span') .text(file); } else { $('.ticket_file_wrapper .dz-clickable span').text(dflt); } }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.ticket_file_wrapper{ position: relative; } .ticket_file_wrapper input[type="file"]{ position: absolute; width:100%; height: 100%; display: block; left:0px; top:0px; opacity: 0; cursor: pointer; } |
Какая суть? инпут делаем прозрачным, и выдвигаем его вперед, относительно основной верстки. На него вешаем клик. Как файл выбран- то заносим имя файла в html позади . Т.е прозрачный инпут загораживает основную html стилизованного элемента.
