本文介绍如何利用JavaScript中的FormData接口实现文件和图片的异步上传。通过XMLHttpRequest Level 2新增的FormData对象，开发者可以模拟表单控件，以键值对形式构建查询字符串，从而避免手动拼接queryString。文章详细讲解了创建FormData对象、追加数据以及结合AJAX进行二进制文件上传的具体代码示例与配置参数。
FormData接口简介
FormData概述
XMLHttpRequest Level 2引入了FormData接口
借助FormData，JS可模拟表单控件键值对，支持通过XMLHttpRequest的send()方法异步上传二进制文件，相比普通ajax优势显著
FormData对象详解
该对象能将表单元素的name与value组合成queryString提交至后台，在ajax场景中可减少手动拼接queryString的工作量
queryString即查询字符串，由url中问号后的参数指定
当form以GET方式提交且含不安全字符时，浏览器先将其转为16进制（如空格转%20），Web Server存入QUERY_STRING环境变量，Request.QueryString方法从中取值并还原16进制字符 利用FormData上传文件与图片
FormData对象的基本用法
实例化一个空的FormData对象，随后调用append方法添加键值对
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上传文件
使用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(){ }
})上述为JS中使用FormData上传文件、图片方法的完整介绍，旨在提供帮助，如有疑义欢迎留言！