我的场景

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

目前发生的事情

上传文件
点击取消按钮，一切都重置（即我重新初始化文件上传控件）
尝试上传文件，但仍然告诉我们已达到最大文件数。

我尝试过什么

我尝试调用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/

如何重置blueimp jQuery fileupload插件？