ajax利用FormData、FileReader实现多文件上传php获取
一、FormData方式[*]前台代码(注意,不需要用到form标签):
a. html部分:
http://i2.运维网.com/images/blog/201803/25/e31058b79e29d32baf228620f4167835.png
b. js部分:
http://i2.运维网.com/images/blog/201803/25/1d16b53cdc773059dbf1535fb5f59e4f.png
c. 完整代码:
function loadDoc(file,data,async=true){
if(window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if(async === true){
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState < 4){
// 加载中
}else if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
// 成功
xmlDoc=xmlhttp.responseText;
return xmlDoc
}else{
// 失败
xmlhttp.abort()
return
}
}
}
xmlhttp.open("POST",file,async);
xmlhttp.send(data);
if(async === false){
xmlDoc=xmlhttp.responseText;
return xmlDoc
}
}
function getEle(id){
var ele = document.getElementById(id)
return ele
}
function sendFile() {
var lee_file = getEle('lee_file');
var lee_text = getEle('lee_text');
var form_data = new FormData();
for (var i in lee_file.files) {
form_data.append('pics[]', lee_file.files);
}
form_data.append('text', lee_text.value);
loadDoc('test.php',form_data)
}
var lee_button = getEle('lee_button');
lee_button.onclick = function(){
sendFile()
}
[*]php获取(用 $_FILE 获取):
http://i2.运维网.com/images/blog/201803/25/b3e7e9702894f124b82e23ea16c2128e.png
完整代码:
页:
[1]