文件上傳之Ajax篇

AJAX上傳文件

1.為什么要寫這篇文章

　 樓主前幾天去北京面試，聊起ajax上傳文件， 面試官告之不能，遂討論之，不得果，於是寫下這篇文章，希望能和大家一起學習

2.正文

　首先，要使用ajax上傳文件就要使用到HTML5 新增的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：

 function upload() {
              var formData = new FormData();            //新建FormData對象
              var fileList = $("#f1").files;         　 //取file控件中的文件,files屬性取到的是一個fileList
            formData.append('aaa', fileList[0]);        //將fileList中的文件逐個放入formData中，注意，直接放入fileList后台是取不到的
            formData.append('aaa', fileList[1]);        //formData.append()中的"key",如果傳入的是文件,就可以隨意取名字了
            formData.append('bbb', $("#t1").val());     //作為示例,同時放入表單數據
            $.ajax({
                url: "@Url.Action("receive","home")",    //C# Razor寫法,也可寫成/home/receive,但是安全性欠佳
                data: formData,
                type: 'POST',
                contentType: false,                      //這里着重強調contentType和processData都要設置為false,否則文件發送不過去
                processData: false,                      //這樣做是為了防止瀏覽器自動轉換發送出的數據格式為字符串或其他
                success: function (data) {               //這一部分樓主隨意寫了
                    if (data === "") {
                        return false;
                    } 
                },
                error: function (a, b, c) {
                    alert("aaa");
                }
            });
        }

后台：

        [HttpPost]
        public ActionResult receive()
        {
            HttpPostedFileBase file = Request.Files[0];
            var file1 = Request.Form[0];
            var bbb = Request.Params["bbb"];
            return null;
        }

　　注：file與file1都是取到的文件，bbb則是取到的value，即"hehe"

　　樓主第一次寫博客，如有錯誤，請多指教，定當虛心學習

　　如有轉載，請注明出處http://www.cnblogs.com/ones/p/4348710.html