多文件上传时，首先要解决的一个问题就是动态去添加或删除文件选择框，原来以为没多么困难的，但是没想到IE居然不支持table.appendChild()的js代码，导致整个前台JS的实现时间比原计划大大增加。不过还好可以借助网络查找需要的资源，最终成功实现兼容IE和FF的文件选择框的动态添加及删除功能。
先来看一下在FF中展现出来的效果，IE中效果亦然；这里要上传的是xls格式的 excel文件，在文件选择之后对文件后缀名进行校验，并且最上面的文件选择框不能删除；
用到的两个小图标也保留一下： 
![[JavaScript]多文件上传时动态添加及删除文件选择框](http://img.e-com-net.com/image/product/30e5e7fafb2544958da05617beaf5855.jpg)
实现过程见代码：
Js代码
- <head>
- <title>excel数据导入</title>
- </head>
- <script type="text/javascript">
- var __FILE_INDEX = 0;//文件标识
- var __LOADING_TIP_DIV=null;
- var __ICON_PATH="<%=request.getContextPath()%>/images/icons";
- /**
- * 对选择的文件进行格式校验,只能选择xls格式的文件
- */
- function checkFile(fileObj){
- var objSpan = document.getElementById("span_"+fileObj.id);
- if(!checkExcel(fileObj.value)){
- objSpan.innerHTML="<img title='错误' src='"+__ICON_PATH+"/check_error.png' border='0'></img><font style='color:red;font-size:12px'>只能导入xls格式文件！</font>"
- fileObj.errFlag = true;
- } else {
- objSpan.innerHTML="<img title='正确' src='"+__ICON_PATH+"/check_right.png' border='0'></img>"
- fileObj.errFlag = false;
- }
- if(fileObj.value != "" && fileObj.noDelete!="true"){
- document.getElementById("del_"+fileObj.id).innerHTML="<span title='删除文件' onclick='deleteFile(\""+fileObj.id+"\")' style='font-size:12px;color: #4684b2;cursor:pointer;border-bottom:1px solid #4684b2'>删除</span>";
- }
- }
- /**
- * 删除选择的文件
- */
- function deleteFile(fileId){
- var trNode = document.getElementById("tr_" + fileId);
- var trParent = trNode.parentNode;
- trParent.removeChild(trNode);
- }
- /**
- * excel校验函数
- */
- function checkExcel(filePath){
- var subfix = filePath.substring(filePath.lastIndexOf(".")+1);
- if(subfix!="xls"){
- return false;
- }
- return true;
- }
- /**
- * 文件上传时的校验逻辑
- */
- function excelUpload(){
- var fileCount = 0;
- var files = document.getElementsByTagName("INPUT");
- for(var i=0; i < files.length; i++){
- if(files[i].type.toLowerCase!='file')continue;
- if(files[i].errFlag){
- alert("导入的文件只能是xls格式，请重新选择.");
- files[i].focus();
- return;
- }
- if(files[i].value!="")
- fileCount++;
- }
- if(fileCount < 1){
- alert("请先选择要上传的数据文件!");
- return;
- }
- document.getElementById("uploadExcelForm").submit();
- }
- /**
- * 添加文件
- */
- function addFile(){
- ++__FILE_INDEX;
- var fileId = "file"+__FILE_INDEX;
- var uploadTable = document.getElementById("tableUploadFile")
- var trElement = uploadTable.insertRow(-1);
- trElement.id="tr_"+fileId;
- var tdElement = trElement.insertCell(-1);
- tdElement.id="td_"+fileId;
- tdElement.innerHTML = "<input type='file' id='"+fileId+"' size='30' style='padding-left:5px;width:300px;cursor:pointer;' onchange='checkFile(this)'>"
- +"<span id='span_" + fileId + "'></span>"
- +"<span id='del_" + fileId + "'></span>";
- }
- </script>
- <body>
- <form id="uploadExcelForm" name="uploadExcelForm" method="post"
- target="_parent" enctype="multipart/form-data"
- action="<%=request.getContextPath()%>/excelUpload.action">
- <table width="100%" id="tableUploadFile" align="center" >
- <tr>
- <td>请选择要上传的Excel数据文件: <span title='添加文件' onclick='addFile()' style='font-size:12px;color: #6495ED;cursor:pointer;border-bottom:1px solid #6495ED'>添加文件</span></td>
- </tr>
- <tr id="tr_file0">
- <td><INPUT class="text" id="file0"
- style="padding-left:5px;width:300px; cursor: pointer" type="file" name="file0" size="30"
- onchange="checkFile(this);" noDelete="true"><span id="span_file0"></span></td>
- </tr>
- </table>
- <div align="center" style="width: 100%"><input type="button" value=" 导入 "
- onclick="excelUpload();"></div>
- </form>
- </body>
- </html>
<head>
<title>excel数据导入</title>
</head>
<script type="text/javascript">
var __FILE_INDEX = 0;//文件标识
var __LOADING_TIP_DIV=null;
var __ICON_PATH="<%=request.getContextPath()%>/images/icons";
/**
* 对选择的文件进行格式校验,只能选择xls格式的文件
*/
function checkFile(fileObj){
var objSpan = document.getElementById("span_"+fileObj.id);
if(!checkExcel(fileObj.value)){
objSpan.innerHTML="<img title='错误' src='"+__ICON_PATH+"/check_error.png' border='0'></img><font style='color:red;font-size:12px'>只能导入xls格式文件！</font>"
fileObj.errFlag = true;
} else {
objSpan.innerHTML="<img title='正确' src='"+__ICON_PATH+"/check_right.png' border='0'></img>"
fileObj.errFlag = false;
}
if(fileObj.value != "" && fileObj.noDelete!="true"){
document.getElementById("del_"+fileObj.id).innerHTML="<span title='删除文件' onclick='deleteFile(\""+fileObj.id+"\")' style='font-size:12px;color: #4684b2;cursor:pointer;border-bottom:1px solid #4684b2'>删除</span>";
}
}
/**
* 删除选择的文件
*/
function deleteFile(fileId){
var trNode = document.getElementById("tr_" + fileId);
var trParent = trNode.parentNode;
trParent.removeChild(trNode);
}
/**
* excel校验函数
*/
function checkExcel(filePath){
var subfix = filePath.substring(filePath.lastIndexOf(".")+1);
if(subfix!="xls"){
return false;
}
return true;
}
/**
* 文件上传时的校验逻辑
*/
function excelUpload(){
var fileCount = 0;
var files = document.getElementsByTagName("INPUT");
for(var i=0; i < files.length; i++){
if(files[i].type.toLowerCase!='file')continue;
if(files[i].errFlag){
alert("导入的文件只能是xls格式，请重新选择.");
files[i].focus();
return;
}
if(files[i].value!="")
fileCount++;
}
if(fileCount < 1){
alert("请先选择要上传的数据文件!");
return;
}
document.getElementById("uploadExcelForm").submit();
}
/**
* 添加文件
*/
function addFile(){
++__FILE_INDEX;
var fileId = "file"+__FILE_INDEX;
var uploadTable = document.getElementById("tableUploadFile")
var trElement = uploadTable.insertRow(-1);
trElement.id="tr_"+fileId;
var tdElement = trElement.insertCell(-1);
tdElement.id="td_"+fileId;
tdElement.innerHTML = "<input type='file' id='"+fileId+"' size='30' style='padding-left:5px;width:300px;cursor:pointer;' onchange='checkFile(this)'>"
+"<span id='span_" + fileId + "'></span>"
+"<span id='del_" + fileId + "'></span>";
}
</script>
<body>
<form id="uploadExcelForm" name="uploadExcelForm" method="post"
target="_parent" enctype="multipart/form-data"
action="<%=request.getContextPath()%>/excelUpload.action">
<table width="100%" id="tableUploadFile" align="center" >
<tr>
<td>请选择要上传的Excel数据文件: <span title='添加文件' onclick='addFile()' style='font-size:12px;color: #6495ED;cursor:pointer;border-bottom:1px solid #6495ED'>添加文件</span></td>
</tr>
<tr id="tr_file0">
<td><INPUT class="text" id="file0"
style="padding-left:5px;width:300px; cursor: pointer" type="file" name="file0" size="30"
onchange="checkFile(this);" noDelete="true"><span id="span_file0"></span></td>
</tr>
</table>
<div align="center" style="width: 100%"><input type="button" value=" 导入 "
onclick="excelUpload();"></div>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script language="javascript">
//全局变量，代表文件域的个数，并用该变量区分文件域的name属性
var file_count = 0;
//增加文件 域
function additem(id) {
if (file_count > 9) {
alert("最u22810 10个u25991 件u22495 ");
return;
}
//定义行变量row；单元格变量cell；单元格内容变量str。
var row,cell,str;
//在指定id的table中插入一行
row = eval("document.all["+'"'+id+'"'+"]").insertRow();
if(row != null ) {
//设置行的背景颜色
row.bgColor="white";
//在行中插入单元格
cell = row.insertCell();
//设置str的值，包括一个文件域和一个删除按钮
str='<input onselectstart="return false" class="tf" onpaste="return false" type="file" name="file[' + file_count + ']" style="width:500px" onkeydown="return false;"/>';
str += " <input type="+'"'+"button"+'"'+" value="+'"'+"删除"+'"'+" onclick='deleteitem(this,"+'"'+"tb"+'"'+");'>";
//文件域个数增加
file_count++;
//设置单元格的innerHTML为str的内容
cell.innerHTML=str;
}
}
//删除文件域
function deleteitem(obj,id) {
var rowNum,curRow;
curRow = obj.parentNode.parentNode;
rowNum = eval("document.all."+id).rows.length - 1;
eval("document.all["+'"'+id+'"'+"]").deleteRow(curRow.rowIndex);
file_count--;
}
</script>
html代码：
<input type=button value="增加" onclick='additem("tb")'/><br/>
<table cellspacing="0" id="tb" style="width:400px">
</table>
</body>
</html>