要点:如何重置blueimp jQuery fileupload插件,使其认为没有文件已上传?
我的场景
- 我有一个上传表单,只允许上传一个文件。
- 一旦上传了该文件,它就会被分析。此时,用户可以点击“取消”按钮,我将重置我的ViewModel的其余部分。
- 当用户点击取消时,我希望重置用户已上传的文件数,因为他们从本质上来说是重新开始的。
- 在重置后仍然希望最多只能上传一个文件。
当前发生的情况
- 上传一个文件
- 点击取消按钮,一切都重置了(即我重新初始化了文件上传控件)
- 尝试上传文件,仍然被告知已达到最大文件数。
我尝试过的方法
我尝试调用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')
,但没有成功(可能是因为它不能处理这些功能,而更多地是关于绑定)。
.data('data')
指的是所选文件。 - Ramfileupload()
的元素吗? - SeanKilleen