blueimp jquery上傳：拖放提交所有文件字段

Question

我在執行Blueimp的jquery上傳時遇到了一個小問題。

我有一個表單，其中包含幾個不同的文件字段上傳。

<div id="file1"> 
    <input class="fileupload" type="file" name="files[]" data-url="jQueryFileUpload.php?pic=1">   
    <div class="dropzone fade well" data-url="jQueryFileUpload.php?pic=1">Drop files here</div> 
    <div class="progress"> 
     <div class="bar" style="width: 0%;"></div> 
    </div> 
    <input type="text" name="pic1" id="pic1" value=""> 
</div> 
<div id="file2"> 
    <input class="fileupload" type="file" name="files[]" data-url="jQueryFileUpload.php?pic=2">   
    <div class="dropzone fade well" data-url="jQueryFileUpload.php?pic=2">Drop files here</div> 
    <div class="progress"> 
     <div class="bar" style="width: 0%;"></div> 
    </div> 
    <input type="text" name="pic2" id="pic2" value=""> 
</div> 

<script> 
$(function() { 
$('.fileupload').fileupload({ 
    dataType: 'json', 
    done: function (e, data) { 
     $.each(data.result.files, function (index, file) { 
      var fileName = file.name; 
      var pic = file.pic; 
      $('#pic'+pic).val(fileName); 
     }); 
    }, 
    progressall: function (e, data) { 
    var progress = parseInt(data.loaded/data.total * 100, 10); 
    $('.progress').show(); 
    $('.progress .bar').css(
     'width', 
     progress + '%' 
    ); 

} 
}); 
}); 
</script> 

當用戶使用瀏覽按鈕來選擇它正確提交它來上傳文件處理程序腳本jQueryFileUpload.php，包括文件領域的參考號文件

...

一旦處理程序腳本通過圖像處理來完成它的工作，它將文件名和相關文件編號傳回給javascript函數，並將文件名添加到文本字段中......每個文件上傳都有自己的文本字段（pic1，pic2等）。

這一切都很好。

我的問題是，如果用戶拖放一個文件到dropzone上，所有的文件字段都會被提交下來的文件。

如果我使用瀏覽按鈕，我在firebug中看到一個單獨的ajax調用上傳處理程序頁面。 如果我拖放我看到多個呼叫：

jQueryFileUpload.php?pic=1 
jQueryFileUpload.php?pic=2 

和所有文本的Fileds得到填補與文件名。

我該如何指定要觸發哪個dropzone？ 或者最糟糕的情況是，我如何禁止完全拖放？

後者我嘗試添加

$(document).bind('drop dragover', function (e) { 
e.preventDefault(); 
}); 

按照文件，但這似乎沒有任何效果..丟棄的文件仍在上傳...

Answer 1

要禁用阻力完全放棄，設置dropZone option到一個空的jQuery集合在fileupload()電話：

$('.fileupload').fileupload({ 
    dropZone: $(), 
    ... 
}); 

要創建multiple dropzones，每個用自己的拖放背景下，遍歷.fileupload輸入，並調用fileupload()每一個，把它當作自己的懸浮窗：

$('.fileupload').each(function() { 
    $(this).fileupload({ 
     dropZone: $(this) 
    }); 
});