Ajaxの添付ファイルのアップロードを実現

最初の二つの記事は、添付ファイルをアップロードするform.submitの使用を導入しているが、このアプローチは、このような将来を超えるなど、非常に使いやすいですアップロードに成功し、いくつかの他の操作たくさんの悩みを実行する必要があります。私は添付ファイルのアップロード機能を実現するために、次の使用AJAXをご紹介しましょう。

1.いるFormDataは、ファイルをアップロードするオブジェクト：

<！DOCTYPE HTML > 
< HTML > 
< ヘッドLANG = "EN" > 
    < メタ文字コード= "UTF-8" > 
    < スクリプトSRC = "https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js " > </ スクリプト> 
    < タイトル> </ タイトル> 
</ ヘッド> 
< 身体> 
    文件：< 入力ID ="ファイル」タイプ= "ファイル" 名= "ファイル" />
>上传文件</ ボタン> 
</ ボディ> 
< スクリプトタイプ= "テキスト/ javascriptの" > 
    $（関数（）{ 
        $（" #upload " ）.click（関数（）{
             VAR FORMDATAは=  新しいいるFormData（）; 
            データ.append（ "ファイル"、$（ "＃ファイル"）[0] .files [0]）; 
            $アヤックス（{ 
                タイプ：' ポスト' 、
                URL：" XXX "、
                データ：へformdat、 
                キャッシュ：偽、
                PROCESSDATA：偽、
                のcontentType：偽、
            。}）成功（関数（データ）{ 
                アラート（データ）; 
            。}）エラー（関数（）{ 
                アラート（" 上传失败" ）; 
            }） ; 
        }）; 
    }）; 
</ スクリプト> 
</ HTML >

パラメータ：1、PROCESSDATAはfalseに設定します。データ値がいるFormDataオブジェクトであるので、データを処理する必要がありません。データ処理は、オブジェクト・タイプであるため、jQueryのは、処理エラーが処理されません。

図2は、キャッシュがfalseに設定され、あなたはファイルキャッシュをアップロードする必要はありません。

3、contentTypeのは、falseに設定します。フォームがいるFormDataオブジェクトを構築している、と属性のenctype =「multipart / form-data」を宣言されているので、ここではfalseに設定されています。

しかし、これいるFormDataは、IEの下位バージョンでのIEのサポートの高いバージョンでのみオブジェクトがいるFormDataオブジェクトをサポートされていない、この方法は、IEの低と高のバージョンが添付ファイルをアップロードするのIEの問題の以下のバージョンを達成することができると互換性があります

2、form.ajaxSubmitが要求を提出し、この方法は、このライブラリは、それ以外の場合はajaxsubmitを使用することはできませんでき、参照jquery.Form.jsが必要です

                  < ラベルのための"btn_file" = > 上传附件</ ラベル> 
                 < フォームID = "フォーム" 方法= "POST" のenctype = "マルチパート/フォームデータ" > 
                    < 入力タイプ= "ファイル" ID "btn_file" = 名= "ファイル" のonchange = "ファイルアップロード（）" > 
                 </ フォーム>

  関数のFileUpload（）
    { 
        $（ '#FORM' ）.ajaxSubmit（{ 
            タイプ： "ポスト" 、
            URL： "XXX.do？"、// 请求的URL地址 
            データ：$（ '＃フォーム' ）.serialize（） 、
            エラー：関数（データ）{ 
                アラート（データ）; 
            }、
            成功：関数（データ）{
                 VARの結果=のeval（ '（' +データ+ ''））;
                 場合（result.success）{ 
                  アラート（result.res ）; 
                } 
            }
        }）; 
}

Ajaxの添付ファイルのアップロードを実現

おすすめ