JS中使⽤FormData上传⽂件、图⽚的⽅法
关于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 ElementById("form1");
var formdata=new FormData(form);
</script>
</body>
</html>
可以在已有表单数据的基础上，继续添加新的键值对
var formdata=new FormData();
formdata.append ("age" , "21");
使⽤FormData对象上传⽂件
ajax实例 文件浏览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(){ }
})
以上所述是⼩编给⼤家介绍的JS中使⽤FormData上传⽂件、图⽚的⽅法的全部叙述，希望对⼤家有所帮助，如果⼤家有任何疑问欢迎给我留⾔！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。