[JavaScript]多文件上传时动态添加及删除文件选择框

qq1013712290

浏览: 218527 次
性别:
来自: 广州

最近访客更多访客>>

u012363178

devcang

itace

mjm13

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

j2se

多文件上传时，首先要解决的一个问题就是动态去添加或删除文件选择框，原来以为没多么困难的，但是没想到IE居然不支持table.appendChild()的js代码，导致整个前台JS的实现时间比原计划大大增加。不过还好可以借助网络查找需要的资源，最终成功实现兼容IE和FF的文件选择框的动态添加及删除功能。
先来看一下在FF中展现出来的效果，IE中效果亦然；这里要上传的是xls格式的 excel文件，在文件选择之后对文件后缀名进行校验，并且最上面的文件选择框不能删除；

用到的两个小图标也保留一下：

实现过程见代码：

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>

分享到：

Netty初步 --概念 | java对象的内存计算

2014-11-07 10:41
浏览 608
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

[JavaScript]多文件上传时动态添加及删除文件选择框

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

[JavaScript]多文件上传时动态添加及删除文件选择框

评论

发表评论

相关推荐

Java 如何有效地避免OOM：善于利用软引用和弱引用

Java内部类详解

浅析Java中的final关键字

http和socket之长连接和短连接区别

一个对象占用多少字节？

JVM学习笔记四 之 运行时数据区

JVM学习笔记三 之 ClassLoader

jvm运行期打印汇编信息

查看java对象在内存中的布局

一个对象占用多少字节？

java对象的内存计算

Jsoup模拟登陆例子

JAVA多线程和并发基础面试问答

java消息插件开发

java监听器原理

java常用设计模式应用案例 .

Java中GC的工作原理 .

java中易出错的且常被面试的几点 .

面试中排名前10的算法介绍 .

创建Java线程池

最近访客更多访客>>

JVM学习笔记四之运行时数据区

JVM学习笔记三之 ClassLoader