ファイルアップロードのAjax編
6745 ワード
AJAXアップロードファイル
1.なぜこの文章を書くのか
スレ主は先日北京に行って面接して、ajaxのアップロードのファイルをチャットして、面接官はそれができないと告げて、ついに討論して、成果がなくて、そこでこの文章を書いて、みんなと一緒に勉強することができることを望みます
2.本文
まず、ajaxを使用してファイルをアップロードするには、HTML 5に追加されたFormDataオブジェクトを使用します.このオブジェクトは実際にはフォームコンテナに相当し、append(「key」、value)という方法があり、キー値のペアで「フォーム」のように動的にコンテンツを追加できます.
第二に、$に対して.ajax()のパラメータを設定します.具体的な設定方法はコードを参照してください.
あまり話さないで、コードをつけてください.
HTML:
JavaScript:
バックグラウンド:
注意:fileとfile 1はすべて取得したファイルで、bbbは取得したvalue、すなわち「hehe」です.
初めてブログを书きます.もし间违いがあれば、よろしくお愿いします.
転載があれば、出典http://www.cnblogs.com/ones/p/4348710.htmlを明記してください
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を明記してください