Fine Uploader仅适用于单批文件 [英] Fine Uploader only works for a single batch of files
问题描述
我的Fine Uploader实现-使用核心模式和jQuery-可以正常工作，直到我尝试上传第二批文件为止.
My Fine Uploader implementation - using the core mode and jQuery - works fine until I try to upload a second batch of files.
(成功)上传第一批文件后，我可以单击按钮添加文件，并获得选择文件的对话框.但是，在我确认选择文件之后，什么也没发生.
When the first batch of files have been uploaded (successfully), I can click the button to add files and get the dialog to select files. However, after I confirm the file(s) selection nothing happens.
complete处理程序中的这段代码引起了麻烦:
This bit of code in the complete handler is causing the trouble:
$('#attachments-upload').button('reset'); // Bootstrap stateful button
#attachments-upload是按钮的ID，该按钮也被设置为button:选项.这是完整的JS代码清单:
#attachments-upload is the id of the button which is set as the button: option as well. Here's the full JS code listing:
$('#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>
但是正如我所说，如果我评论以下内容，
But as I said, if I comment the following line,
$('#attachments-upload').button('reset');
一切正常.
推荐答案
我钻入了Bootstrap兔子洞，并给出了答案.
I delved into the Bootstrap rabbit hole, and came out with your answer.
Bootstrap提供的.button('reset')方法有点奇怪.当按钮的状态更改时(即调用.button('loading')或.button('reset'))，Bootstrap JS会在状态更改前缓存按钮的HTML内容，并将其作为字符串存储在元素的data属性下.
The .button('reset') method offered by Bootstrap is a bit wonky. When the state of the button is changed, (i.e., .button('loading') or .button('reset') is called) the Bootstrap JS caches the HTML contents of the button before the state change and stores it as a string under the element's data attribute.
所以，首先按钮是:
<button id="attachments-upload"...>
Add files ...
<input type='file' name='qqfile'>
</button>
一旦您调用$("#attachments-upload").button('loading')，按钮的内部HTML就会被更改:
Once you call $("#attachments-upload").button('loading') the button's inner-HTML gets changed:
<button id="attachments-upload" ...>loading ...</button>
请注意，文件输入元素不再存在.
Notice that the file input element is not there anymore.
重置按钮可通过重新注入缓存的HTML将其恢复到原始状态:
Resetting the button reverts it back to its original state by re-injecting the cached HTML:
<button id="attachments-upload"...>
Add files ...
<input type='file' name='qqfile'>
</button>
，但此时文件输入元素已从DOM中删除，并且先前附加的所有事件处理程序对该元素不再有效. Fine Uploader在内部绑定到此输入元素的onChange事件，以跟踪通过该输入元素提交的文件.
but at this point the file input element has been removed from the DOM and all previously attached event handlers are not longer valid on that element. Fine Uploader binds to this input element's onChange event internally to track files that have been submitted via that input element.
您有一些选择.
首先，删除对.button('reset')和.button('loading')
1)忘记在按钮上设置正在加载..."文本.现在，它显示的行为使我推断出，您不希望您的用户能够上传任何文件，直到当前的上传文件完成(达到onComplete)为止.这种行为有点奇怪，因为上传文件"按钮应该保持无状态.
1) Forget about setting the 'loading...' text on the button. The behavior it displays now leads me to infer that you would not like your users to be able to upload any files until the current uploading file is completed (onComplete is reached). This behavior is a bit strange as the Upload Files button should remain stateless.
2)如果您希望在不删除输入元素的情况下保持当前行为，则可以通过编程方式更改处理程序内部按钮的加载文本.
2) Programmatically change the loading text of the button inside of your handlers if you would like to keep the current behavior without the removal of the input element.
3)显示另一个进度通知，例如微调器(您可以在onSubmit内部使用show()，在onComplete内部使用hide())
3) Display another progress notification such as a spinner (which you can show() inside of the onSubmit and hide() inside of the onComplete)
另外，我注意到您可能想在允许的扩展名中添加"jpg".现在，这些文件将被拒绝，但是"jpeg"文件将被接受.
Also, another small thing I noticed that you probably want to add "jpg" to your allowed extensions. Right now those'll get denied, but "jpeg" files will be accepted.
这篇关于Fine Uploader仅适用于单批文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
