- dinguangx
- 等级:
 - 性别:
 - 文章: 53
- 积分: 180
- 来自: 上海
|
多文件上传时，首先要解决的一个问题就是动态去添加或删除文件选择框，原来以为没多么困难的，但是没想到IE居然不支持table.appendChild()的js代码，导致整个前台JS的实现时间比原计划大大增加。不过还好可以借助网络查找需要的资源，最终成功实现兼容IE和FF的文件选择框的动态添加及删除功能。
先来看一下在FF中展现出来的效果，IE中效果亦然；这里要上传的是xls格式的 excel文件，在文件选择之后对文件后缀名进行校验，并且最上面的文件选择框不能删除；
用到的两个小图标也保留一下：  
实现过程见代码：
<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>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
|
| 返回顶楼 |
|
|
- haytalent
- 等级: 初级会员
 - 性别:
- 文章: 81
- 积分: 20
- 来自: 未知国度
|
innerHTML和innerText ff浏览器不支持的，能不能改点通用的呢？
|
| 返回顶楼 |
|
|
- fashionia
- 等级: 初级会员
 - 性别:
- 文章: 12
- 积分: 30
- 来自: 北京
|
haytalent 写道 innerHTML和innerText ff浏览器不支持的，能不能改点通用的呢？
innerHTML是一个标准的东西，通用的
只有innerText会出现不兼容的情况
|
| 返回顶楼 |
|
|
- cloudgamer
- 等级:
- 性别:
- 文章: 76
- 积分: 370
- 来自: 顺德
|
|
| 返回顶楼 |
|
|
- suiye007
- 等级: 初级会员
 - 性别:
- 文章: 23
- 积分: 0
- 来自: 北京
|
图片显示不出来，建议上传到JavaEye论坛上面好点。
|
| 返回顶楼 |
|
|
- cbasten
- 等级: 初级会员
 - 性别:
- 文章: 13
- 积分: 70
- 来自: 青岛
|
cloudgamer 写道
感谢分享！ 不错的上传
|
| 返回顶楼 |
|
|