web-dev-qa-db-ja.com

blueimp jQuery fileuploadプラグインをリセットするにはどうすればよいですか？

The Gist： blueimp jQuery fileuploadプラグインをリセットして、ファイルがまだアップロードされていないと見なすにはどうすればよいですか？

私のシナリオ

  • 1つのファイルのみをアップロードできるアップロードフォームがあります。
  • そのファイルがアップロードされると、分析されます。この時点で、ユーザーには「キャンセル」ボタンをクリックするオプションがあり、ビューモデルの残りの部分をリセットします。
  • ユーザーが[キャンセル]をクリックしたときに、ユーザーがアップロードしたファイルの数をリセットしたいのですが、それらは基本的に新しく開始されているためです。
  • リセット後も1つのファイルの最大値を適用したいのですが。

現在何が起こっているのか

  • ファイルをアップロードする
  • キャンセルボタンをクリックすると、すべてがリセットされます（つまり、ファイルアップロードコントロールを再初期化します）。
  • ファイルをアップロードしようとしても、最大ファイル数に達したと通知されます。

私が試したこと

Fileupload（ 'destroy'）を呼び出してから再初期化しようとしましたが、結果が得られなかったようです（破棄するとインスタンスの追跡も破棄されることを期待していました）。

私の質問：

  • アップロードコントロールをゼロから開始するかのように破棄/再初期化/リセットする最良の方法は何ですか？
  • 何もない場合、効果的にリセットするために、プログラムによってblueimpに、すでに1つのファイルがアップロードされた後にゼロファイルがアップロードされたと思わせる方法はありますか？あなたが与えることができるあらゆる助けを前もってありがとう！

バージョンに関する注意：

ちなみに、私は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>
_

ページの2番目のファイルアップロードコントロール：

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

おそらく、その時点でファイルが既にアップロードされているためです（問題ありません）。

ただし、これは2番目のフォームでは機能しません。私が試してみました：

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

これにより、アイテムがページから消えますが、追加のファイルが追加されると、アイテムは再び表示されます。

私は$("#detailsFileUploadForm").fileupload('destroy')も試してみましたが、成功しませんでした（おそらくこれらの関数を処理せず、バインディングについての詳細が原因です）。

javascriptjqueryfile-uploadblueimp
16
SeanKilleen

これに対する答えは私が予想したよりもはるかに簡単でした：

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

以前は、私はやりすぎでした-コンテナーを破棄/リセットしようとしてもうまくいきませんでした。

この1行のコードで、リストはリセットされたように見え、私の知る限りすべてがうまく機能しています。

19
SeanKilleen

ここに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});
       });
 * /}

そのため、「// Load existing files」の部分をクリアするかコメントする必要があります。

1
Paul TSL

以前にアップロードしたファイルが次のアップロードに含まれるという同様の問題がありました。あなたが何時間も苦労しているように。私が次の解決策を試すまで。これは、以前にアップロードされたファイルをクリアするトリックを実行します。

関数の追加時に、以下のようにファイル入力要素の「変更」イベントを追加するだけです：

$('#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/

0
Joesel Duazo