JS中使用FormData上传文件、图片的方法
关于FormData
XMLHttpRequestLevel2添加了一个新的接口 ----FormData
利用FormData对象，可以通过js用一些键值对来模拟一系列表单控件，可以使用XMLHttpRequest的send()方法来异步提交表单与普通的ajax相比，使用FormData的最大优点就是可以异步上传二进制文件
FormData对象
FormData对象，可以把所有表单元素的name与value组成一个queryString,提交到后台。在使用ajax提交时，使用FormData对象可以减少拼接queryString的工作量
queryString是查询字符串，http查询字符串由url中？后面的值指定
当页面上的form以GET方式向页面发送请求数据时(如数据含有不安全字符，则浏览器先将其转换成16进制的字符再传送，如空格被转换成%20时),webserver将请求数据放入一名为QUERY_STRING的环境变量中。 Request.QueryString 方法是从这一环境变量中取出相应的值，并将被转成16进制的字符还原
使用FormData上传文件、图片
创建一个FormData空对象，然后使用append方法添加key/value
varformdata=newFormData();
formdata.append("name","张三");
如果已经有一个Form表单，取得form对象，作为参数传入FormData对象
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title></title>
</head>
<body>
<formname="form1"id="form1">
<inputid="file"type="file"name="name"></input>
</form>
<scripttype="text/javascript">
varform=document.getElementById("form1");
varformdata=newFormData(form);
</script>
</body>
</html>
可以在已有表单数据的基础上，继续添加新的键值对
varformdata=newFormData();
formdata.append("age","21");
使用FormData对象上传文件
varformdata=newFormData($("#form1").[0]);//获取文件法一
//varformdata=newFormData();
//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上传文件、图片的方法的全部叙述，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言！