使用FormData上传文件、图片

时间：2016-08-07 10:59:02 阅读：205 评论：0 收藏：0 [点我收藏+]

标签：

关于FormData

XMLHttpRequest Level 2添加了一个新的接口 ---- FormData
利用FormData对象，可以通过js用一些键值对来模拟一系列表单控件，可以使用XMLHttpRequest的 send( ) 方法来异步提交表单
与普通的ajax相比，使用FormData的最大优点就是可以异步上传二进制文件

FormData对象

- FormData对象，可以把所有表单元素的name与value组成一个queryString,提交到后台。在使用ajax提交时，使用FormData对象可以减少拼接queryString的工作量
- queryString是查询字符串，http查询字符串由url中？后面的值指定
- 当页面上的form以GET方式向页面发送请求数据时 (如数据含有不安全字符，则浏览器先将其转换成16进制的字符再传送，如空格被转换成%20时 ) ,web server 将请求数据放入一名为QUERY_STRING的环境变量中。 Request.QueryString 方法是从这一环境变量中取出相应的值，并将被转成16进制的字符还原

使用FormData上传文件、图片

创建一个FormData空对象，然后使用append方法添加key/value
```
var formdata=new FormData();
 formdata.append ("name" , "张三");
```

如果已经有一个Form表单，取得form对象，作为参数传入FormData对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <form name="form1" id="form1">
       <input  id="file"  type="file" name="name"></input>
    </form>
    <script type="text/javascript">
         var form=document.getElementById("form1");
         var formdata=new FormData(form);
    </script>
</body>
</html>

可以在已有表单数据的基础上，继续添加新的键值对
```
var formdata=new FormData();
 formdata.append ("age" , "21");
```

使用FormData对象上传文件

var formdata=new FormData($("#form1").[0]);//获取文件法一
//var formdata=new FormData( ); 
//formdata.append("file" ,  $("#file")[0].files[0]);//获取文件法二
              $.ajax({
                     type : ‘post‘,
                     url : ‘#‘,
                     data : formdata,
                     cache : false,
                     processData : false,  //  不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理
                     contentType : false,  //  不设置Content-type请求头
                     success : function(){}
                     error : function(){ }
              })

使用FormData上传文件、图片

标签：

原文地址：http://www.cnblogs.com/chtt/p/5745624.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行