如何在图标点击上激活dropzone

Question

我正在使用图片。 我想在图像点击时激活dropzone图像选择框。 当用户点击<i class="fa fa-image" id="dzopen"></i>用户可以通过浏览选择文件并上传图片预览应显示在<div id="media-upload-previews"></div>

 <i class="fa fa-image" id="dzopen"></i>
<div id="media-upload-previews">
</div>
<script>
    Dropzone.options.myAwesomeDropzone = {
        paramName: "file",
        maxFilesize: 10,
        url: 'UploadImages',
        previewsContainer: "#media-upload-previews",
        uploadMultiple: true,
        parallelUploads: 5,
        maxFiles: 20
    }
</script>

Answer 1

你可以将你的代码包装到像这样的jquery点击事件

$(document).on("click", "#dzopen", function(){
   //initilize your dropzone here .
});

Answer 2

此代码对我有用

$("i#dzopen").dropzone({
    paramName: "file",
    maxFilesize: 10,
    url: 'UploadImages',
    previewsContainer: "#media-upload-previews",
    uploadMultiple: true,
    parallelUploads: 5,
    maxFiles: 20,
    acceptedFiles: "image/*,audio/*,video/*",
    init: function () {
        this.on("success", function (file, responseText) {
            alert(file);
            alert(responseText);
           console.log(file);
        });
        this.on("thumbnail", function (file, dataUrl) {
            $('#media-upload-previews').append('<img src="' + dataUrl + '" width="50" height="50" alt="">');
        });
        this.on("removedfile", function (file) {});
        this.on("complete", function (file) {
            alert(file);
        });
    }
});