在浏览器关闭后,使用精细上传器恢复先前中断的上传的一般方法是什么?我已经搜索了文档并使用了代码,但没有取得任何成功。
我设想用可恢复文件重新填充上传者以及"恢复"和"取消"按钮(如PAUSED上传)。我以为我可以使用getResumableFilesData()
和addInitialFiles()
,但状态默认为COMPLETED。如果我应该使用addFiles()
,那么构建输入值的最佳方法是什么?或者,我完全走错了路?
如果我遗漏了一些明显的东西,请原谅我。我正朝着正确的方向寻找有用的推动。
提前致谢!
这是我的上传模板:
<script type="text/template" id="qq-template">
<div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container progress total_progress">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
class="qq-total-progress-bar-selector progress-bar"></div>
</div>
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector"></span>
</div>
<div class="qq-upload-button-selector btn btn-default">
<div><span class="glyphicon glyphicon-plus"></span> Browse
Files</div>
</div>
<br><br>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>Processing dropped files...</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
<li>
<div class="qq-progress-bar-container-selector progress">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<button type="button" class="btn btn-default btn-sm qq-upload-cancel-selector">Cancel</button>
<button type="button" class="btn btn-default btn-sm qq-upload-retry-selector">Retry</button>
<button type="button" class="btn btn-default btn-sm qq-upload-delete-selector qq-upload-delete">Delete</button>
<button type="button" class="btn btn-default btn-sm qq-upload-pause-selector">Pause</button>
<button type="button" class="btn btn-default btn-sm qq-upload-continue-selector">Continue</button>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
</li>
</ul>
<dialog class="qq-alert-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Close</button>
</div>
</dialog>
<dialog class="qq-confirm-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">No</button>
<button type="button" class="qq-ok-button-selector">Yes</button>
</div>
</dialog>
<dialog class="qq-prompt-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<input type="text">
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Cancel</button>
<button type="button" class="qq-ok-button-selector">Ok</button>
</div>
</dialog>
</div>
</script>
这是我的精简加载程序配置。
var uploader = $('#fine-uploader').fineUploader({
template: 'qq-template',
debug: true,
callbacks: {
onAllComplete: function(succeeded, failed) {
$('#doclib_tree').jstree(true).refresh()
if (failed.length > 0) {
alert("Error: Some files were not uploaded");
} else {
if (succeeded.length > 0 ) {
alert("Successfully uploaded " + succeeded.length + " file(s)");
}
this.reset();
toggle_upload();
}
},
onError: function(id, name, errorReason, xhrOrXdr) {
alert("Error uploading " + name + ". Reason: " + errorReason)
},
onSubmit: function(id, name) {
var promise = new qq.Promise();
var dest = document.getElementById('dest_label').innerHTML.replace(/ > /g, "/")
$.ajax({
'type': 'POST',
'async': false,
'url': "/documents/exists" ,
'data': {
'parents' : get_path(dest),
'name': name,
},
'success': function(data, textStatus, jqHXR) {
if ( check_session(data) ) {
promise.failure();
} else {
if (confirm("The file '" + dest + "/" + name + "' already exists. Replace?"))
promise.success();
else
promise.failure();
}
},
'error': function(jqHXR, textStatus, errorThrown) {
promise.success();
}
});
return promise;
},
},
chunking: {
enabled: true,
partSize: 20000000, // 20MB
success: {
endpoint: "/documents/upload?success=1",
}
},
resume: {
enabled: true
},
request: {
endpoint: "/documents/upload",
},
autoUpload: true
});
以下是我希望在初始化时检索并显示可恢复文件的代码。我确实得到了一个填充的resumes
数组。
var resumes = uploader.fineUploader('getResumableFilesData')
if ( resumes > 0 ) {
// Should I be doing something different here?
uploader.fineUploader('addFiles', resumes)
}
答案 0 :(得分:2)
Fine Uploader stores information about the progress of interrupted files in the browser's local storage.如果在后续浏览器/上传会话中再次将同一文件添加到上传器,Fine Uploader将开始从最后一个失败/中断的块开始上传该文件。
如果您想提示您的用户重新添加中断的文件,您当然可以这样做。如果用户通过DnD或文件输入元素(或getResumableFilesData()
API方法)将这些文件重新提交到上传器,addFiles
将告诉您可以恢复的中断文件。
答案 1 :(得分:0)
如果可以使用替代方法,我建议使用以下现代库:
https://github.com/23/resumable.js
和
https://github.com/flowjs/flow.js(基于相同的resumable.js)