jQuery HTML5とFormDataを使用してファイルをアップロードする方法の例

HTML5 が登場する前には、AJAX ファイルのアップロードを実装するための一連の jQuery テクノロジとプラグインがありました。 HTML5 では、ファイルのアップロードを簡素化する FormData クラスが導入されています。この記事では、jQuery HTML5とFormDataを使ってファイルをアップロードする例を紹介します。

$('#myform').on('sumbit', function(){
    var form = $(this);
    var formdata = false;
    if (window.FormData)
    {
        formdata = new FormData(form[0]);
    }
    var formAction = form.attr('action');
    $.ajax({
        url         : '/upload',
        data        : formdata ? formdata : form.serialize(),
        cache       : false,
        contentType : false,
        processData : false,
        type        : 'POST',
        success     : function(data, textStatus, jqXHR){
            // Callback code
        }
    });
    });

これを効果的に実現するために、プラグイン、フラッシュ、または iframe のスキルは必要ありません。このコードを期待どおりに動作させるためのいくつかのトリックを次に示します。

FormData のインスタンスを作成するとき、form の代わりに form[0] を渡します。これは実際のフォーム要素を意味しますが、jQuery セレクターを意味しません。

contentType を定義する代わりに false を渡すだけです。これは、jQuery が Content-Type ヘッダーをリクエストに追加しないことを意味します。

processData を false に設定したため、jQuery はデータ値 (FormData に基づく) を文字列に変換しません。

以上がjQuery HTML5とFormDataを使用してファイルをアップロードする方法の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。