如何重置 blueimp jQuery 文件上传插件？

Question

要点：如何重置 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">&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();

以前，我认为我做的太多了——尝试销毁/重置容器也没有用。

使用这一行代码，列表似乎已重置，据我所知，一切运行良好。

Answer 2

这里是重置 jquery-fileupload 的理想解决方案

在文件“main.js”中删除或注释加载现有文件脚本如下：

 

if (window.location.hostname === 'blueimp.github.io') {
        // Demo settings:
        $ ('# fileupload'). fileupload ('option', {
            url: '//jquery-file-upload.appspot.com/',
            // Enable image resizing, except for Android and Opera,
            // which actually support image resizing, but fail to
            // send Blob objects via XHR requests:
            disableImageResize: /Android(?!.*Chrome)|Opera/
                .test (window.navigator.userAgent)
            maxFileSize: 999000,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
        });
        // Upload server status check for browsers with CORS support:
        if ($ .support.cors) {
            $ .Ajax ({
                url: '//jquery-file-upload.appspot.com/',
                type: 'HEAD'
            }). fail (function () {
                $ ('<div class = "alert alert-danger" />')
                    .text ('Upload server currently unavailable -' +
                            new Date ())
                    .appendTo ( '# fileupload');
            });
        }
      } else {
        // Load existing files:
 / * $ ('# fileupload'). addClass ('fileupload-processing');
        $ .Ajax ({
            // Uncomment the following to send cross-domain cookies:
            // xhrFields: {withCredentials: true},
            url: $ ('# fileupload'). fileupload ('option', 'url')
           dataType: 'json',
           context: $ ('# fileupload') [0]
       }). always (function () {
           $ (This) .removeClass ( 'fileupload-processing');
       }). done (function (result) {
          $ (this) .fileupload ('option', 'done')
                .call (this, $ .Event ('done'), {result: result});
       });
 * /}

   因此您必须清除或评论“//加载现有文件”部分

Answer 3

我有一个类似的问题，以前上传的文件包含在下一次上传中。就像你挣扎了几个小时一样。直到我尝试了以下解决方案。 这将清除以前上传的文件。

在添加功能时，只需添加文件输入元素的“更改”事件，如下所示：

$('#YourFileUploadElementId').change(function(e) {
     data.files.splice(0); // Clear All Existing Files
});

完整示例如下：

$('#YourFileUploadElementId').fileupload({
    // Some options
    add: function (e, data) {
        if(data.files.length > 0) {
          // Upload Code Here
        }
        $('#YourFileUploadElementId').change(function(e) {
          data.files.splice(0); // Clear All Existing Files
        });
    },
    // Other Events
 });

注意：只需将 YourFileUploadElementId 更改为您的文件上传元素 ID。 不要忘记在上传期间使用以下内容过滤文件：

if(data.files.length > 0) {
 // Upload Code Here
}

这是 jsfiddle.net 上的完整示例

http://jsfiddle.net/dustapplication/cjodz2ma/5/