Das Wesentliche: Wie kann ich ein blueimp jQuery FileUpload-Plugin zurücksetzen, sodass es denkt, dass noch keine Dateien hochgeladen wurden?

Mein SzenarioIch habe ein Upload-Formular, mit dem nur eine Datei hochgeladen werden kann.Sobald diese Datei hochgeladen wurde, wird sie analysiert. Zu diesem Zeitpunkt kann der Benutzer auf die Schaltfläche "Abbrechen" klicken, um den Rest meines Ansichtsmodells zurückzusetzen.Wenn der Benutzer auf Abbrechen klickt, möchte ich die Anzahl der Dateien, die der Benutzer hochgeladen hat, zurücksetzen, da diese im Wesentlichen neu gestartet werden.Ich möchte weiterhin, dass nach dem Zurücksetzen die Datei maximal angewendet wird.Was passiert aktuell?Eine Datei hochladenKlicken Sie auf die Schaltfläche Abbrechen. Alles wird zurückgesetzt (d. H. Ich initialisiere das Steuerelement zum Hochladen von Dateien neu)Es wurde versucht, eine Datei hochzuladen, und es wird weiterhin mitgeteilt, dass die maximale Anzahl von Dateien erreicht wurde.Was ich versucht habe

Ich habe versucht, fileupload ('destroy') aufzurufen und dann erneut zu initialisieren, aber das schien kein Ergebnis zu haben (ich hatte gehofft, dass das Zerstören auch die Verfolgung der Instanz beeinträchtigen würde).

Meine Fragen):Was ist der beste Weg, um das Upload-Steuerelement zu zerstören / neu zu initialisieren / zurückzusetzen, als würde es von Grund auf neu gestartet?Wenn es keine gibt, gibt es eine Möglichkeit, blueimp programmgesteuert glauben zu lassen, dass keine Dateien hochgeladen wurden, nachdem eine bereits hochgeladen wurde, um sie effektiv zurückzusetzen? Vielen Dank im Voraus für jede Hilfe, die Sie geben können!Ein Hinweis zur Version:

Zu Ihrer Information, ich bin auf v8.8.1 - Ich würde es vorziehen, nicht zu aktualisieren, da ein Kollege einen Teil des Codes auf eine bestimmte Weise geändert hat - igitt. Wir planen, diese Anpassung zu entfernen und zu aktualisieren, jedoch zu einem geplanten Zeitpunkt. Wenn ich ein Update durchführen muss, um dieses Problem zu beheben, können Sie es mir gerne mitteilen, da dies absolut fair ist.

Update: Ein bisschen Code

Das erste Steuerelement zum Hochladen von Dateien auf der Seite:

<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>

Das zweite Steuerelement zum Hochladen von Dateien auf der Seite:

<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>

Ich kann das erste Steuerelement löschen mit:

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

vermutlich, weil die Datei zu diesem Zeitpunkt bereits hochgeladen wurde (was in Ordnung ist).

Dies funktioniert jedoch nicht für das zweite Formular. Ich habe versucht:

    $("#detailsFileUploadForm").find('.cancel').click();

Dadurch werden die Elemente nicht mehr auf der Seite angezeigt, wenn jedoch eine zusätzliche Datei hinzugefügt wird.

Ich habe es auch versucht$("#detailsFileUploadForm").fileupload('destroy') ohne Erfolg (vermutlich, weil es diese Funktionen nicht ausführt und sich mehr um Bindungen handelt.