如何重置blueimp jQuery fileupload插件？

Question

要点:我如何重置一个blueimp jQuery fileupload插件,以便它认为没有上传文件？

我的情景

• 我有一个只允许上传一个文件的上传表单.
• 上传该文件后,将对其进行分析.此时,用户可以选择单击"取消"按钮,在此重置我的视图模型的其余部分.
• 当用户点击取消时,我想重置用户上传的文件数,因为它们基本上刚刚开始.
• 我仍然希望在重置后应用最大的一个文件.

目前发生了什么

• 上传一个文件
• 单击取消按钮,一切都重置(即我重新初始化文件上传控件)
• 尝试上传文件,但仍然告诉我们已达到最大文件数.

我试过的

我尝试调用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">&nbsp;</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">&nbsp;</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')过没有成功(大概是因为它不处理这些功能,更多的是绑定.

Answer 1

对此的答案比我预期的要简单得多:

$("table tbody.files").empty();

以前,我认为我做得太多了 - 试图破坏/重置容器也不行.

使用这一行代码,列表似乎重置,据我所知,所有代码都运行良好.