jQuery Dropzone Clickable blueimp

Question

我正在使用dropzone效果，我已经完成了所有操作，我的问题是没有添加文件按钮，我希望使dropzone区域可点击（div）

E.g。

<div id="dropzone"></div>

我希望点击这个，所以我试过了。

<div id="dropzone><input type='file' name='files' multiple>

然而，这显示了我的div上一个丑陋的浏览器字段。无论如何要删除它，只是让div可点击以显示选择文件对话框？

Answer 1

在HTML中

<div id="dropzone><input type='file' style="display:none" name='files' multiple></div>

在JS中

$(document).ready(function(){

$("#dropzone").on("click",function(){// here when click on dropzone div
$("#dropzone input[type='file']").trigger('click');// then trigger input type=file change event 
});


});

Answer 2

在HTML中：将文件输入移到dropzone之外并添加ID：

<div id="dropzone></div>
<input type='file' style="display:none" id="selectFiles" name='files' multiple>

在JS中：在selectFiles上单击（在dropzone之外，如果selectFiles在dropzone内。trigger（'click'）也会触发对dropzone的点击，并且将有一个无限循环）

$("#dropzone").on("click",function(e){
     e.stopPropagation(); 
    $("#selectFiles").trigger('click');
});