Question

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

HTML

$("[data-me=someThing-i-like]").remove();// will work fine

JavaScript：

<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>

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

实际上在我的项目中有很多使用Image Upload＆amp;我将在不同页面上多次使用Dropzone。

我的问题是 - 我可以写一个Dropzone功能＆amp;传递参数值，如Id，maxFiles，paramName，maxFilesize＆amp;可能是其他人，所以我不必写多个Dropzone函数？

提前致谢。

Answer 1

好吧，我不确定这是否是您正在寻找的但是我发生的一件事是您可以使用divs 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
    });

});

具有单一功能的多个dropzone

1 个答案: