0

我的 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');

一切正常。

4

1 回答 1

5

我钻研了 Bootstrap 兔子洞，得出了你的答案。

Bootstrap 提供的.button('reset')方法有点不靠谱。当按钮的状态发生改变（即，.button('loading')或被.button('reset')调用）时，Bootstrap 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”文件将被接受。

于 2013-08-28T18:44:13.223 回答