Fine Uploader仅适用于单批文件

Question

我的Fine Uploader实现-使用核心模式和jQuery-可以正常工作，直到我尝试上传第二批文件。

当第一批文件成功上传后，我可以单击按钮添加文件，然后弹出对话框选择文件。但是，在确认文件选择后，什么也没有发生。

complete处理程序中的以下代码引起了问题：

$('#attachments-upload').button('reset'); // Bootstrap stateful button

#attachments-upload是也设置为button:选项的按钮的ID 。这是完整的JS代码清单：

$('#attachments-list').fineUploader({
    uploaderType: 'basic',
    button: $('#attachments-upload'),
    debug: true,
    request: {
        endpoint:   $route_atatachments_upload,
        inputName: 'attachments'
    },
    validation: {
        allowedExtensions: ['png', 'jpeg', 'gif', 'pdf', 'doc', 'bmp'],
        sizeLimit: 10485760 // 10MB
    }
})
.on('upload', function(event, id, fileName) {

    $('#attachments-upload-error').hide();
    $('#attachments-upload').button('loading');
    $('#attachments-upload-progress').show().attr('aria-valuenow', 0);

})
.on('progress', function(event, id, fileName, loaded, total) {

    if (loaded < total) {
        var progress = Math.round(loaded / total * 100) + '% of ' + Math.round(total / 1024) + ' kB';
        $('#attachments-upload-progress').attr('aria-valuenow', progress);

    } else {
        $('#attachments-upload-progress').attr('aria-valuenow', 100);
    }

})
.on('complete', function(event, id, fileName, responseJSON) {

    $('#attachments-upload-progress').hide();
    $('#attachments-upload').button('reset');

    if (responseJSON.success) {

        $('<tr class="attachment" data-attachment-uuid="'+ responseJSON.uuid + '">' +
            '<td>' + fileName +'</td>' +
            '<td>' + humanFileSize(responseJSON.size) + '</td>' +
            '<td style="text-align: center"><a class="delete-attachment" href="#"><span class="glyphicon glyphicon-trash" </a></td>' +
            '</tr>').
            insertBefore($('#add-attachment'));


    } else {
        $('#attachments-upload-error').show();
        console.log(responseJSON.error);
    }
});

这是HTML：

<table class="table table-bordered" id="attachments-list">
    <thead>
        <tr>
            <th>Name</th>
            <th>Size</th>
            <th></th>
        </tr>
    </thead>
    <tbody id="added-attachments">
        <tr id="add-attachment">
            <td colspan="2">
                <div id="attachments-upload-progress" class="progress progress-striped active" style="display:none">
                    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </td><td style="width:1%; white-space:nowrap;">
                <button id="attachments-upload" class="btn btn-success" data-loading-text="loading ..." style="position: relative; overflow: hidden; direction: ltr; ">Add Files ...</button>
            </td>
        </tr>
    </tbody>
</table>

但是正如我所说，如果我评论以下内容，

$('#attachments-upload').button('reset');

一切正常。

Answer 1

我钻进了Bootstrap兔子洞，并给出了答案。

.button('reset')Bootstrap提供的方法有点奇怪。当按钮的状态改变时，（即，.button('loading')或.button('reset')称）的自举JS的状态变化，并把它存储为元素的下一个字符串之前缓存该按钮的HTML内容data属性。

因此，首先按钮是这样的：

<button id="attachments-upload"...>
    Add files ...
    <input type='file' name='qqfile'>
</button>

调用$("#attachments-upload").button('loading')按钮后，内部HTML就会更改：

<button id="attachments-upload" ...>loading ...</button>

请注意，文件输入元素不再存在。

重置按钮可以通过重新注入缓存的HTML将其恢复到原始状态：

<button id="attachments-upload"...>
    Add files ...
    <input type='file' name='qqfile'>
</button>

但此时文件输入元素已从DOM中删除，并且所有先前附加的事件处理程序对该元素不再有效。Fine Uploader在onChange内部绑定到此输入元素的事件，以跟踪已通过该输入元素提交的文件。

您有几种选择。

最重要的是，删除对.button('reset')和的呼叫.button('loading')

1）忘记在按钮上设置“正在加载...”文本。现在，它显示的行为使我推断出，您不希望您的用户能够上传任何文件，直到当前的上传文件完成（onComplete达到）为止。此行为有点奇怪，因为“上传文件”按钮应保持无状态。

2）如果您希望在不删除输入元素的情况下保持当前行为，请以编程方式更改处理程序内部按钮的加载文本。

3）显示另一个进度通知，例如微调器（您可以show()在的内部onSubmit和的hide()内部onComplete）

另外，我注意到您可能还想在允许的扩展名中添加“ jpg”。现在，这些文件将被拒绝，但是“ jpeg”文件将被接受。