兼容IE8的注意點：
- 原生多文件屬性multiple只在IE10/11上有效，IE8不兼容無法使用
- formdata對象同樣只支持在IE10/11，IE8無法使用
- 很多API在IE8上無法使用，同樣是兼容的難點
- IE8的安全機制，使一些操作無法實現
本文使用原生JS對文件進行簡單處理實現多文件上傳，未使用其他插件。
實現思路：
由於multiple屬性無法使用，採取通過增加input框的方式實現多文件的選擇和存儲，故單次只能選擇一個文件，可選擇多次。
選擇完一個文件之後，調用方法隱藏input，並將文件名以列表形式顯示出來，並提供刪除選項。
效果圖：
實現代碼：
<!DOCTYPE html>
<html>
<head>
<title>多文件上傳</title>
<meta charset="utf-8">
<style>
.file-select{
position: relative;
}
/*設置透明*/
.file-select input[type=file]{
position: absolute;
width: 50px;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
opacity: 0;
-webkit-opacity: 0;
-moz-opacity: 0;
z-index: 100;
}
.brower{
display: inline-block;
width: 50px;
position: absolute;
left: 0px;
color: skyblue;
}
.file-select input:hover + span.brower{
text-decoration: underline;
}
</style>
</head>
<body>
<form action="hello.do" method="post" enctype="multipart/form-data">
<div id="eee">
<span>選擇文件：</span>
<input type="submit" value="提交" />
<br />
<div class="file-select" id="file_div1">
<input type="file" name="UploadFile" οnchange="fileChange()" />
<span class="brower">瀏覽</span>
<input type="button" οnclick="deleteDiv()" style="display: none;" value="刪除" />
</div>
</div>
</form>
<script>
var FILECOUNT = 1;
function fileChange() {
var preDiv = document.getElementById("file_div" + FILECOUNT);
var nextDiv = preDiv.cloneNode(true);
FILECOUNT = FILECOUNT + 1;
// 添加新的div
nextDiv.setAttribute("id", "file_div" + FILECOUNT)
document.getElementById("eee").appendChild(nextDiv);
// 對已選完文件的div進行處理
var preFile = preDiv.children[0],
preSpan = preDiv.children[1],
preButton = preDiv.children[2];
preFile.style["display"] = "none";
preSpan.className = "";
preSpan.innerHTML = preFile.value;
preButton.style["display"] = "inline-block";
}
// 刪除方法
function deleteDiv(event) {
var ev = event || window.event;
var target = ev.target || ev.srcElement;
document.getElementById("eee").removeChild(target.parentNode);
}
</script>
</body>
</html>
持續更新：github地址