转自http://www.jb51.net/article/89998.htm
参考:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects
FormData
废话不多说,先上最后我用的完成版:
完整实例版:
<form id="fileform" enctype="multipart/form-data">
<input type='file' name='file'/><br/>
<input type='submit' value='submit'/>
</form>
/*上传文件*/
document.querySelector("#fileform").addEventListener("submit", function(event) {
var formdata=new FormData($("#fileform")[0]);
$.ajax({
type : 'post',
url :host+'/file/uploadFileLocal?xxxxxxxxxxxxxx',//地址改为后台给的上传地址
data : formdata,
cache : false,
processData : false, // 不处理发送的数据,因为data值是Formdata对象,不需要对数据做处理
contentType :false, // 不设置Content-type请求头
success : function(res){
if((res.code==200) && (res.payload == "success"))
swal("","上传成功!","success")
else{
swal("","上传失败","error")
}
},
error : function(x){
swal("","连接服务器失败","error")
console.log('wrong:',x)
}
})
event.preventDefault();
})
概念:关于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
如果已经有一个Form表单,取得form对象,作为参数传入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(){ }
})
扩展:FileList
来自:https://developer.mozilla.org/zh-CN/docs/Web/API/FileList一个FileList对象通常来自于一个HTML input元素的files属性,
你可以通过这个对象访问到用户所选择的文件.
该类型的对象还有可能来自用户的拖放操作.
例子:
这个例子迭代了用户通过一个input元素选择的多个文件:// fileInput是一个 HTML input 元素:
<input type="file" id="myfileinput" multiple>
var fileInput = document.getElementById("myfileinput");
// files 是一个 FileList 对象(类似于NodeList对象)
var files = fileInput.files;
var file;
//遍历所有文件
for (var i = 0; i < files.length; i++) {
// 取得一个文件
file = files.item(i);
// 这样也行
file = files[i];
// 取得文件名
alert(file.name);
}
更完整的例子:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
// multiple属性可以让用户能选择多个文件
<input id="myfiles" multiple type="file">
</body>
<script>
var pullfiles=function(){
// 获取到input元素
var fileInput = document.querySelector("#myfiles");
var files = fileInput.files;
// 获取到所选文件数量
var fl=files.length;
var i=0;
while ( i < fl) {
var file = files[i];
alert(file.name);
i++;
}
}
// 设置change事件处理函数
document.querySelector("#myfiles").οnchange=pullfiles;
</script>
</html>