文件上传之Ajax篇

浏览数：29 / 时间：2015年06月09日

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：

 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;
        }