如何在图标单击时激活拖放区

how to activate dropzone on icon click

本文关键字：激活 拖放区 单击 图标      更新时间：2023-09-26

我正在使用图像。我想在图像单击时激活拖放区图像选择框。当用户单击<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>

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

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

这段代码对我有用

$("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);
        });
    }
});
相关文章：