php - jQuery Dropzone 可点击 blueimp

Question

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

例如

<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 中：调用 click on selectFiles（在 dropzone 之外，如果 selectFiles 在 dropzone 内 .trigger('click') 也会触发点击 dropzone 并且您将有一个无限循环）

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