要旨:如何重置 blueimp jQuery 文件上传插件,使其认为尚未上传任何文件?
我的场景
- 我有一个上传表单,只允许上传一个文件。
- 文件上传后,就会对其进行分析。此时,用户可以选择单击“取消”按钮,我可以在其中重置视图模型的其余部分。
- 当用户单击“取消”时,我想重置用户上传的文件数,因为它们本质上是全新的。
- 我仍然希望重置后最多应用一个文件。
目前发生了什么
- 上传一个文件
- 单击取消按钮,一切重置(即我重新初始化文件上传控件)
- 尝试上传文件,但仍然被告知已达到最大文件数。
我尝试过的
我尝试调用 fileupload('destroy') 然后重新初始化,但这似乎没有结果(我希望销毁也会破坏实例的跟踪)。
我的问题:
- 销毁/重新初始化/重置上传控件的最佳方法是什么,就像从头开始一样?
- 如果没有,是否有任何方法可以以编程方式使 blueimp 认为在已经上传了零个文件后已上传了零个文件,以有效地重置它?
预先感谢您提供的任何帮助!
关于版本的说明:
仅供参考,我使用的是 v8.8.1——我不想升级,因为一位同事以特定方式更改了一些代码——呃。我们计划删除此自定义并升级,但会在预定日期进行。如果我必须更新才能解决此问题,请随时告诉我,因为这是完全公平的。
更新:一些代码
页面第一个文件上传控件:
<form id="summaryFileUploadForm" action="/api/InvoiceDetailsFile/PostForProcessing" method="POST"
enctype="multipart/form-data" data-bind="disableFileUpload: InvoiceHasSummaryDocument() || (!InvoiceDataIsFilledIn())">
<div class="fileupload-buttonbar">
<div class="fileupload-buttons">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="fileinput-button">
<span>Add files...</span>
<input id="file" type="file" name="file" />
</span>
<span class="fileupload-loading"></span>
</div>
<!-- The global progress information -->
<div class="fileupload-progress fade" style="display: none">
<!-- The global progress bar -->
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
<!-- The extended global progress information -->
<div class="progress-extended"> </div>
</div>
</div>
<div data-bind="fadeVisible: InvoiceHasSummaryDocument()">
<span class="ui-icon ui-icon-check float-left"></span><span>A summary document has been uploaded.</span>
</div>
<span data-bind="fadeVisible: (!InvoiceDataIsFilledIn())">Please fill out invoice information before uploading a file.</span>
<!-- The table listing the files available for upload/download -->
<table role="presentation">
<tbody class="files" id="Tbody1"></tbody>
</table>
<script id="summaryFileDownloadTemplate" type="text/x-tmpl">
</script>
</form>
页面第二个文件上传控件:
<form id="detailsFileUploadForm" action="/api/InvoiceDetailsFile/PostForProcessing" method="POST"
enctype="multipart/form-data" data-bind="disableFileUpload: Invoice().DetailItems().length > 0 || (!InvoiceHasSummaryDocument())">
<div class="fileupload-buttonbar">
<div class="fileupload-buttons">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="fileinput-button">
<span>Add files...</span>
<input id="file" type="file" name="file" />
</span>
<span class="fileupload-loading"></span>
</div>
<!-- The global progress information -->
<div class="fileupload-progress fade" style="display: none">
<!-- The global progress bar -->
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
<!-- The extended global progress information -->
<div class="progress-extended"> </div>
</div>
</div>
<span><strong>NOTE: </strong>Only Excel 2007+ (.xlsx) files are accepted. <a href="<%= ResolveUrl("~/asset/xlsx/Ligado_InvoiceUploadTemplate_Standard.xlsx") %>" target="_blank" id="A1">Need a blank Invoice Upload template?</a><br />
</span>
<span data-bind="fadeVisible: Invoice().DetailItems().length > 0">Invoice details have been uploaded.</span>
<span data-bind="fadeVisible: (!InvoiceHasSummaryDocument())">Please upload a summary file prior to uploading a details file.</span>
<!-- The table listing the files available for upload/download -->
<table role="presentation">
<tbody class="files" id="fileList"></tbody>
</table>
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade" style="display:none">
<td>
<span class="preview"></span>
</td>
<td>
<p class="name">{%=file.name%}</p>
{% if (file.error) { %}
<div><span class="error">Error:</span> {%=file.error%}</div>
{% } %}
</td>
<td>
<p class="size">{%=o.formatFileSize(file.size)%}</p>
{% if (!o.files.error) { %}
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
{% } %}
</td>
<td>
{% if (!o.files.error && !i && !o.options.autoUpload) { %}
<button class="start">Start</button>
{% } %}
{% if (!i) { %}
<button class="cancel">Cancel</button>
{% } %}
</td>
</tr>
{% } %}
</script>
<script id="template-download" type="text/x-tmpl">
</script>
</form>
我可以使用以下方法清除第一个控件:
$("tbody.files").empty();
大概是因为此时文件已经上传(这很好)。
但是,这不适用于第二种形式。我努力了:
$("#detailsFileUploadForm").find('.cancel').click();
这会使这些项目从页面中消失,但在添加其他文件时它们会重新出现。
我也尝试过$("#detailsFileUploadForm").fileupload('destroy')
没有成功(大概是因为它不处理这些函数并且更多地与绑定有关。