[JavaScript]多文件上传时动态添加及删除文件选择框
??????? 多文件上传时，首先要解决的一个问题就是动态去添加或删除文件选择框，原来以为没多么困难的，但是没想到IE居然不支持table.appendChild()的js代码，导致整个前台JS的实现时间比原计划大大增加。不过还好可以借助网络查找需要的资源，最终成功实现兼容IE和FF的文件选择框的动态添加及删除功能。
?????? 先来看一下在FF中展现出来的效果，IE中效果亦然；这里要上传的是xls格式的?excel文件，在文件选择之后对文件后缀名进行校验，并且最上面的文件选择框不能删除；
用到的两个小图标也保留一下：?![[JavaScript]多文件下传时动态添加及删除文件选择框](http://img.reader8.net/uploadfile/jiaocheng/2014/011415/201401140115249999.jpg)
![[JavaScript]多文件下传时动态添加及删除文件选择框](http://img.reader8.net/uploadfile/jiaocheng/2014/011415/2014011401152410000.jpg)
?
![[JavaScript]多文件下传时动态添加及删除文件选择框](http://img.reader8.net/uploadfile/jiaocheng/2014/011415/2014011401152410001.jpg)
实现过程见代码：
<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 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>?
?
1 楼 haytalent 2010-09-28 innerHTML和innerText ff浏览器不支持的，能不能改点通用的呢？ 2 楼 fashionia 2010-09-28 haytalent 写道innerHTML和innerText ff浏览器不支持的，能不能改点通用的呢？innerHTML是一个标准的东西，通用的
只有innerText会出现不兼容的情况
3 楼 cloudgamer 2010-10-07 我也写过类似的多文件上传
还美化了file控件 4 楼 suiye007 2010-10-08 图片显示不出来，建议上传到JavaEye论坛上面好点。 5 楼 cbasten 2010-10-11 cloudgamer 写道我也写过类似的多文件上传
还美化了file控件
感谢分享！ 不错的上传