多文件上传 input 的multiple 属性

一、上传多张图片并且预览

HTML：

<div class="container">
<label>请选择一个图像文件：</label>
<input type="file" id="file_input" multiple/>
</div>
<div id="body">

</div>

js：

window.onload = function() {
var input = document.getElementById("file_input");
var result, div;

if(typeof FileReader === 'undefined') {
result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
//setAttribute() 方法添加指定的属性，并为其赋指定的值。（js）
input.setAttribute('disabled', 'disabled');
} else {
//addEventListener 用于指定元素添加事件（js）
input.addEventListener('change', readFile, false);
}

function readFile() {
for(var i = 0; i < this.files.length; i++) {
if(!input['value'].match(/.jpg|.gif|.png|.bmp/i)) {　　 //判断上传文件格式
return alert("上传的图片格式不正确，请重新选择")　　　　　　　　　　
}
var reader = new FileReader();
reader.readAsDataURL(this.files[i]);
reader.onload = function(e) {
result = '<div id="result"><img src="' + this.result + '" alt=""/></div>';
div = document.createElement('div');
div.innerHTML = result;
document.getElementById('body').appendChild(div);　　 //插入dom树 <br>　　　　　　　　　　}
}
}
}
}

二、多文件上传  并且将文件存成数组  分别赋值id name

 

function xhrUploadMultiDocuments(){

var ufiles = UploadFile.files;
console.log(ufiles)
if(ufiles.length==0){
alert("请至少选择一个文件！");
return false;
}

var str = "";
var form_Ele = document.getElementById("formFiles");
var form_Data = new FormData(form_Ele);
for(i=0; i < ufiles.length; i++){
if(i==0){
form_Data.append("UploadFile", ufiles[i]);
}else{
form_Data.append("file" + i, ufiles[i]);
}
//获取上传的名字
var temp = ufiles[i].name;
str += "<div>" + temp + "</div>";
console.log(str)

}
$(".FileArea").append(str);

var xhr = new XMLHttpRequest();
xhr.open("POST", "/iPlatform/uploadFile");

xhr.onload = function(event) {
};

xhr.send(form_Data);
};
</script>

转载于:https://www.cnblogs.com/qiu2841/p/9186236.html