具有單功能的多個拖放區域

Question

我有一個具有多個拖放區域的圖像上傳區域。下面是我的代碼：

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個格4種不同的懸浮窗功能。這工作正常。

其實在我的項目中有很多使用圖片上傳&我將在不同的頁面上多次使用Dropzone。

我的問題是 - 我可以寫一個懸浮窗功能&傳似標識，MAXFILES，PARAMNAME，MAXFILESIZE &的參數值可能是別人，這樣我不用寫多個懸浮窗功能做？

在此先感謝。

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 
    }); 

});