ファイルアップロードのAjax編

6745 ワード

AJAXアップロードファイル
1.なぜこの文章を書くのか
スレ主は先日北京に行って面接して、ajaxのアップロードのファイルをチャットして、面接官はそれができないと告げて、ついに討論して、成果がなくて、そこでこの文章を書いて、みんなと一緒に勉強することができることを望みます
2.本文
まず、ajaxを使用してファイルをアップロードするには、HTML 5に追加されたFormDataオブジェクトを使用します.このオブジェクトは実際にはフォームコンテナに相当し、append(「key」、value)という方法があり、キー値のペアで「フォーム」のように動的にコンテンツを追加できます.
第二に、$に対して.ajax()のパラメータを設定します.具体的な設定方法はコードを参照してください.
あまり話さないで、コードをつけてください.
HTML:
 
<input type="file" name="f1" id="f1" />
<input type="button" onclick="upload()" value="upload" multiple/>
<input type="text" value="hehe" id="t1" name="t1"/>

 
JavaScript:
 1  function upload() {
 2               var formData = new FormData();            //  FormData  
 3               var fileList = $("#f1").files;           // file      ,files        fileList
 4             formData.append('aaa', fileList[0]);        // fileList        formData ,  ,    fileList       
 5             formData.append('aaa', fileList[1]);        //formData.append()  "key",        ,         
 6             formData.append('bbb', $("#t1").val());     //    ,        
 7             $.ajax({
 8                 url: "@Url.Action("receive","home")",    //C# Razor  ,    /home/receive,       
 9                 data: formData,
10                 type: 'POST',
11                 contentType: false,                      //      contentType processData     false,         
12                 processData: false,                      //                              
13                 success: function (data) {               //          
14                     if (data === "") {
15                         return false;
16                     } 
17                 },
18                 error: function (a, b, c) {
19                     alert("aaa");
20                 }
21             });
22         }

バックグラウンド:
        [HttpPost]
        public ActionResult receive()
        {
            HttpPostedFileBase file = Request.Files[0];
            var file1 = Request.Form[0];
            var bbb = Request.Params["bbb"];
            return null;
        }

注意:fileとfile 1はすべて取得したファイルで、bbbは取得したvalue、すなわち「hehe」です.
初めてブログを书きます.もし间违いがあれば、よろしくお愿いします.
転載があれば、出典http://www.cnblogs.com/ones/p/4348710.htmlを明記してください