相容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" onchange="fileChange()" />
<span class="brower">浏覽</span>
<input type="button" onclick="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位址
![實作電腦功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)