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

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();

以前，我認為我做得太多了——嘗試銷毀/重置容器並沒有奏效。

使用這一行代碼，列表似乎重置了，據我所知，一切都運行良好。

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/