单一功能的多个拖放区

Question

我有一个包含多个 Dropzones 的表单，用于上传图片。下面是我的代码：

HTML

<form>
    <input type="text">
    <div>
        <div>
            <div class="dropzone dropzone-previews" id="test-image1"></div>
            <div class="dropzone dropzone-previews" id="test-image2"></div>
        </div>
        <div>
            <div class="dropzone dropzone-previews" id="test-image3"></div>
            <div class="dropzone dropzone-previews" id="test-image4"></div>
        </div>
    </div>
</form>

JavaScript:

$(function () {
    Dropzone.options.testImage1 = {
        url: "test1.php",
        maxFiles : 10,
        paramName: "file1", 
        maxFilesize: 2,
    }
    Dropzone.options.testImage2 = {
        url: "test2.php",
        maxFiles : 20,
        paramName: "file2", 
        maxFilesize: 10,
    }
    Dropzone.options.testImage3 = {
        url: "test3.php",
        maxFiles : 30,
        paramName: "file3", 
        maxFilesize: 20,
    }
    Dropzone.options.testImage4 = {
        url: "test4.php",
        maxFiles : 40,
        paramName: "file4", 
        maxFilesize: 5,
    }       
});

现在我有 4 个不同的 Dropzone 函数用于 4 个 div。这工作正常。

实际上在我的项目中有很多图片上传的使用，我将在不同的页面上多次使用 Dropzone。

我的问题是——我可以编写一个 Dropzone 函数并传递参数值，例如 Id、maxFiles、paramName、maxFilesize 等，这样我就不必编写多个 Dropzone 函数了吗？

提前致谢。

Answer 1

嗯，我不确定这是否是您正在寻找的，但我想到的一件事是您可以使用 div id 来设置选项，然后在 javascript 中使用该 id配置 dropzone 元素。

这里是一个通用示例，其中包含您在问题中使用 jQuery:

提到的参数

html:

<div class="dropzone" id="image-1-10-1"></div>
<div class="dropzone" id="image-2-20-2"></div>
<div class="dropzone" id="image-3-30-3"></div>
<div class="dropzone" id="image-4-40-4"></div>

js:

Dropzone.autoDiscover = false;

$('.dropzone').each(function(){
    var options = $(this).attr('id').split('-');
    var dropUrl = 'test' + options[1] + '.php';
    var dropMaxFiles = parseInt(options[2]);
    var dropParamName = 'file' + options[1];
    var dropMaxFileSize = parseInt(options[3]);

    $(this).dropzone({
        url: dropUrl,
        maxFiles: dropMaxFiles,
        paramName: dropParamName,
        maxFilesSize: dropMaxFileSize

        // Rest of the configuration equal to all dropzones
    });

});

单一功能的多个拖放区

Multiple dropzone with single function

javascript

jquery

dropzone.js