在一个页面上拖放更多jQuery-File-Upload小部件

Question

我正在使用jQuery-File-Upload在我的网站上传图片，但我需要2页上传区域，两者都有拖放功能。问题是，在将文件拖放到一个上传区域后，文件开始上传两次，每个文件上传小部件一次。 当我通过点击按钮上传图像时，文件仅在此小部件中开始上传。

你能帮帮我，如何设置插件来做我需要的东西？或者这是buq？

由于

代码： 我使用了github的代码：https://github.com/blueimp/jQuery-File-Upload/releases/tag/9.8.1 在示例“basic.html”中，我通过复制原始元素来创建新元素。

<span class="btn btn-success fileinput-button">
        <i class="glyphicon glyphicon-plus"></i>
        <span>Select files...</span>
        <!-- The file input field used as target for the file upload widget -->
        <input id="fileupload" type="file" name="files[]" multiple>
    </span>
    <span class="btn btn-success fileinput-button">
        <i class="glyphicon glyphicon-plus"></i>
        <span>Select files2...</span>
        <!-- The file input field used as target for the file upload widget -->
        <input id="fileupload2" type="file" name="files[]" multiple>
    </span>
    <br>
    <br>
    <!-- The global progress bar -->
    <div id="progress" class="progress">
        <div class="progress-bar progress-bar-success"></div>
    </div>
    <!-- The container for the uploaded files -->
    <div id="files" class="files"></div>
    <div id="progress2" class="progress">
        <div class="progress-bar progress-bar-success"></div>
    </div>
    <div id="files2" class="files"></div>

<script>
/*jslint unparam: true */
/*global window, $ */
$(function () {
    'use strict';
    // Change this to the location of your server-side upload handler:
    var url = 'http://localhost/EYELEVEL/mobile-wizard-lite/www/cz/files/upload';
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo('#files');
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');


    $('#fileupload2').fileupload({
        url: url,
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo('#files2');
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress2 .progress-bar').css(
                'width',
                progress + '%'
            );
        }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>