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 等）。

这一切都很好。

我的问题是，如果用户将文件拖放到拖放区，所有文件字段都会随拖放文件一起提交。

如果我使用我在 firebug 中看到的浏览按钮，则对上传处理程序页面的单个 ajax 调用。如果我拖放我会看到多个调用：

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

并且所有文本字段都填写了文件名。

如何指定要触发的拖放区？或者，最坏的情况是，我怎样才能完全禁用拖放功能？

对于后者，我尝试添加

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

根据文档，但这似乎没有任何效果。丢弃的文件仍在上传...

Answer 1

要完全禁用拖放，请在您的 fileupload() 调用中将 dropZone option 设置为空 jQuery 集合：

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

要创建 multiple dropzones，每个都有自己的拖放上下文，遍历 .fileupload 输入，并在每个输入上调用 fileupload()，将其作为自己的拖放区传递：

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

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

blueimp jquery upload : drag and drop submitting all file fields

javascript

jquery

ajax

jquery-file-upload