多文件上傳 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>