22

ファイルをアップロードするための簡単なコードがあります。

$(document).ready(function () {
    $(".attachmentsUpload input.file").change(function () {
        $('form').submit();
    });
});

<form class="attachmentsUpload" action="/UploadHandler.ashx" method="post" enctype="multipart/form-data">
    <input type="file" class="file" name="file" />
</form>

入力をクリックしてダイアログボックスでファイルを選択している間、ajaxを使用してこのファイルを送信しています。これはここでは重要な部分ではありません。重要なのは、ダイアログボックスで同じファイルを2回選択しても、最初のファイルを送信した直後に、IEとChromeで.change（）イベントが発生しないことです。しかし、別のファイルを選択すると、イベントが発生して正しく機能します。Firefoxでは、常に起動しています。

これを回避するには、（Firefoxのように）期待どおりに機能しますか？

4

2 に答える 2

31

説明

これは、同じファイルを再度選択しても、入力フィールド（選択したファイルパス）の値が変更されないために発生します。

イベントの値をonChange()空の文字列に設定し、値が空でない場合にのみフォームを送信できます。私のサンプルとこのjsFiddleデモンストレーションを見てください。

サンプル

$(".attachmentsUpload input.file").change(function () {
    if ($(".attachmentsUpload input.file").val() == "") {
        return;
    }
    // your ajax submit
    $(".attachmentsUpload input.file").val("");
});

アップデート

これは、何らかの理由で、IE9では機能しません。要素を交換してリセットできます。 この場合live()、入力フィールドが動的に（再）作成されるため、イベントをバインドするにはjQueryが必要です。 これはすべてのブラウザで機能します。

私はこの解決策をstackoverflowの回答で見つけましたjQueryを使用してinputtype='file'をクリアします

$(".attachmentsUpload input.file").live("change", function () {
    if ($(".attachmentsUpload input.file").val() == "") {
        return;
    }
    // get the inputs value
    var fileInputContent = $(".attachmentsUpload input.file").val();
    // your ajax submit
    alert("submit value of the file input field=" + fileInputContent);
    // reset the field
    $(".attachmentsUpload input.file").replaceWith('<input type="file" class="file" name="file" />');
});​

詳しくは

私の更新されたjsFiddleをチェックしてください

注： jQueryの新しいバージョンから削除されましliveた。の代わりに使用してください。onlive

于 2012-04-18T17:51:15.707 に答える
1

dknaack の回答に基づいて、手がかりはjquery live を使用して変更イベントをバインドし、送信後に入力フィールドをリセットすることです。

$(document).ready(function () {
    $(".attachmentsUpload input.file").change(function () {
        $('form').submit();  /* sync submit */
        $(".attachmentsUpload input.file").replaceWith('<input type="file" class="file" name="file" />');
    });
});

再設定は、送信イベントが完了した後に実行する必要があります。送信がasyncの場合、たとえばajax 成功イベントでフィールドをリセットします。

$(document).ready(function () {
    $(".attachmentsUpload input.file").change(function () {
        $('form').submit();  /* async submit */
    });
});

.ajaxForm({
    ...
    success: function (result) {
        // reset the field - needed for IE to upload the same file second time                    
        $this.find("input.file").replaceWith('<input type="file" class="file" name="file" />');
    }
});
于 2012-09-20T13:57:25.540 に答える