jQueryでajax XMLhttpRequest,FormDataに基づくフォームアップロード


XMLHttpRequestは長い間発売されていたが、W 3 Cはこれに対していくつかの良い特性を導入し、チェン一峰はXMLHttpRequest Level 2使用ガイドをまとめた良い文章を持っている.
実際の使用では時代遅れのブラウザを排除し、最も簡単な使用方法は
  • 標準のHTML構文でFORMフォーム
  • を生成する
  • handerフォームのsubmitイベントは、FormDataでXMLhttpRequestコミットデータを生成してコミットし、submitにfalse
  • を返す
  • XMLHttpRequest結果の処理
  • これでajax方式のフォーム提出が完了しました.もちろんこれはファイルアップロードをサポートしています.jQueryを使えばajaxコードは多分こんな感じ
    $('yourform').submit(function(){
        var formdata=new FormData(this);
        $.ajax({
            type:'POST',
            url:'/yourpath',
            data:formdata,
            /**
             *  false         Content-Type
             */
            contentType:false,
            /**
             *   false    jQuery  formdata      
             * XMLHttpRequest   formdata        
             */
            processData:false
        }).then(function(){
            //doneCal
        },function(){
            //failCal
        });
        return false;
    });

    標準的には簡単です.
    現代のブラウザの使用をユーザーに要求できることが多い.たとえば、編集の場合、カスタマイズされたエンタープライズ・ユーザーに対応します.