<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../jquery.min.js"></script>
</head>
<body>
<form action="a.php" method="post" enctype="multipart/form-data" id="form">
<input type="file" name="pic" id="file" multiple accept="image/png,image/jpg,image/jpeg,image/gif">
</form>
<div id="upload">上传</div>
<script>
$('#upload').click(function () {
function ajax(data){
var xhr = new XMLHttpRequest();
xhr.open('POST','http://api.com/upload');
xhr.onreadystatechange = function(){
if (4 == xhr.readyState) {
if (200 == xhr.status) {
var replyData = JSON.parse(xhr.responseText);//返回的json数据
//成功后的操作
}
}
};
xhr.upload.onprogress = function (evt) {
var loaded = evt.loaded;//上传了的大小
var tot = evt.total;//附件总大小
var pre=Math.floor(100*loaded/tot);//上传百分比
//显示百分比的操作
}
xhr.send(data);
}
var data=new FormData();
var fileLists=$('#file')[0].files;//获取文件
$(fileLists).each(function (i) {
data.append('file1',$(this)[0])//文件信息
// file对象的信息：
// name 图片名
// size 图片大小
// type 图片类型
// lastModified 最后上传的时间毫秒
ajax(data);//将图片上传服务器
data.delete('file1')//删除刚发送过的数据，使每次上传都是一张图片 safari会报错
})
})
</script>
</body>
</html>
关于FormData
FormData 可以很方便地将表单字段和它们的值建立成键和值对应的成对形式，然后通过 XMLHttpRequest 的 sent() 方法发送表格数据
method
var data=new FormData(); 1.append(添加键值) data.append(name,value,filename) 2.delete(删除键值) data.delete(name) 3.get(返回给定键的第一个值) data.get(name)(返回name键的第一个值) 4.getAll(返回给定键的所有值) data.getAll(name)(返回name键的所有值) 5.has(是否包含给定值) data.has(name) 6.set(设置给定值) data.set(name,value,iframe)
