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

news/2024/7/7 20:11:01

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

 

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


实现过程见代码：

Js代码 复制代码  收藏代码
  1. <head>  
  2. <title>excel数据导入</title>  
  3. </head>  
  4. <script type="text/javascript">  
  5.     var __FILE_INDEX = 0;//文件标识  
  6.     var __LOADING_TIP_DIV=null;  
  7.     var __ICON_PATH="<%=request.getContextPath()%>/images/icons";  
  8.     /** 
  9.     * 对选择的文件进行格式校验,只能选择xls格式的文件 
  10.     */  
  11.     function checkFile(fileObj){  
  12.         var objSpan = document.getElementById("span_"+fileObj.id);  
  13.         if(!checkExcel(fileObj.value)){  
  14.             objSpan.innerHTML="<img title='错误' src='"+__ICON_PATH+"/check_error.png' border='0'></img><font style='color:red;font-size:12px'>只能导入xls格式文件！</font>"  
  15.             fileObj.errFlag = true;  
  16.         } else {  
  17.             objSpan.innerHTML="<img title='正确' src='"+__ICON_PATH+"/check_right.png' border='0'></img>"  
  18.             fileObj.errFlag = false;  
  19.         }  
  20.         if(fileObj.value != "" && fileObj.noDelete!="true"){  
  21.             document.getElementById("del_"+fileObj.id).innerHTML="<span title='删除文件' οnclick='deleteFile(\""+fileObj.id+"\")' style='font-size:12px;color: #4684b2;cursor:pointer;border-bottom:1px solid #4684b2'>删除</span>";  
  22.         }  
  23.    }  
  24.   
  25.     /** 
  26.      * 删除选择的文件 
  27.      */  
  28.     function deleteFile(fileId){  
  29.        var trNode = document.getElementById("tr_" + fileId);  
  30.        var trParent = trNode.parentNode;  
  31.        trParent.removeChild(trNode);  
  32.     }  
  33.   
  34.     /** 
  35.      * excel校验函数 
  36.      */  
  37.    function checkExcel(filePath){  
  38.        var subfix = filePath.substring(filePath.lastIndexOf(".")+1);  
  39.           if(subfix!="xls"){  
  40.             return false;  
  41.           }  
  42.           return true;  
  43.    }  
  44.     /** 
  45.      * 文件上传时的校验逻辑 
  46.      */  
  47.    function excelUpload(){  
  48.        var fileCount = 0;  
  49.        var files = document.getElementsByTagName("INPUT");  
  50.        for(var i=0; i < files.length; i++){  
  51.            if(files[i].type.toLowerCase!='file')continue;  
  52.           if(files[i].errFlag){  
  53.              alert("导入的文件只能是xls格式，请重新选择.");  
  54.              files[i].focus();  
  55.              return;  
  56.           }  
  57.           if(files[i].value!="")  
  58.             fileCount++;  
  59.       }  
  60.       if(fileCount < 1){  
  61.          alert("请先选择要上传的数据文件!");  
  62.          return;  
  63.       }  
  64.       document.getElementById("uploadExcelForm").submit();  
  65.   }  
  66.      /** 
  67.       * 添加文件 
  68.       */  
  69.      function addFile(){  
  70.            ++__FILE_INDEX;  
  71.            var fileId = "file"+__FILE_INDEX;  
  72.            var uploadTable = document.getElementById("tableUploadFile")  
  73.            var trElement = uploadTable.insertRow(-1);  
  74.            trElement.id="tr_"+fileId;  
  75.            var tdElement = trElement.insertCell(-1);  
  76.            tdElement.id="td_"+fileId;  
  77.            tdElement.innerHTML =  "<input type='file' id='"+fileId+"' size='30' style='padding-left:5px;width:300px;cursor:pointer;' οnchange='checkFile(this)'>"  
  78.                +"<span id='span_" + fileId + "'></span>"  
  79.                +"<span id='del_" + fileId + "'></span>";  
  80.      }  
  81. </script>  
  82. <body>  
  83. <form id="uploadExcelForm" name="uploadExcelForm" method="post"  
  84.     target="_parent" enctype="multipart/form-data"  
  85.     action="<%=request.getContextPath()%>/excelUpload.action">  
  86. <table width="100%" id="tableUploadFile"  align="center" >  
  87.     <tr>  
  88.         <td>请选择要上传的Excel数据文件: <span title='添加文件' οnclick='addFile()' style='font-size:12px;color: #6495ED;cursor:pointer;border-bottom:1px solid #6495ED'>添加文件</span></td>  
  89.     </tr>  
  90.     <tr id="tr_file0">  
  91.         <td><INPUT class="text" id="file0"  
  92.             style="padding-left:5px;width:300px; cursor: pointer" type="file" name="file0" size="30"  
  93.             οnchange="checkFile(this);" noDelete="true"><span id="span_file0"></span></td>  
  94.     </tr>  
  95. </table>  
  96.  <div align="center" style="width: 100%"><input type="button" value=" 导入 "  
  97.             οnclick="excelUpload();"></div>  
  98. </form>  
  99.   
  100. </body>  
  101. </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='删除文件' οnclick='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;' οnchange='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='添加文件' οnclick='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"
			οnchange="checkFile(this);" noDelete="true"><span id="span_file0"></span></td>
	</tr>
</table>
 <div align="center" style="width: 100%"><input type="button" value=" 导入 "
			οnclick="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" οnpaste="return false" type="file"  name="file[' + file_count + ']" style="width:500px" οnkeydοwn="return false;"/>';

    str += " <input type="+'"'+"button"+'"'+" value="+'"'+"删除"+'"'+"   οnclick='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="增加" οnclick='additem("tb")'/><br/>
 <table cellspacing="0" id="tb" style="width:400px">
 </table>

</body>
</html>
 

http://www.niftyadmin.cn/n/3959852.html

相关文章

第四周疑难点

第四周疑难点

18-20题的编程和解读不清楚&#xff1f; https://blog.csdn.net/a1015553840/article/details/50979640 c编译器有点问题&#xff0c;搞好IDE再回来。 林老师的优秀博客资料&#xff1a; https://blog.csdn.net/red_stone1/article/category/6956972转载于:https://www.cnblogs…
阅读更多...
Netty初步 --概念

Netty初步 --概念

1.入门文档 如果是入门的话&#xff0c;官网的文档已经相当好了。里面的例子程序得仔细阅读&#xff0c;这里就不再重复转载了。参见http://netty.io/wiki/user-guide.html 2.为什么需要netty 2.1 主要是scalibity和performance 2.2 另外Netty In Action有一些说明&#xff0c;…
阅读更多...
Ubuntu腾讯云主机安装分布式memcache服务器，C#中连接云主机进行存储的示例

Ubuntu腾讯云主机安装分布式memcache服务器，C#中连接云主机进行存储的示例

Ubuntu腾讯云主机安装分布式memcache服务器&#xff0c;C#中连接云主机进行存储的示例&#xff08;github代码&#xff1a;https://github.com/qq719862911/MemcacheTestDemo&#xff09; 1、腾讯云安装memcache服务器&#xff0c;并且启动服务器。 1)安装Memcache服务端 sudo …
阅读更多...
Practical Netty (3) 在Netty中使用Protobuf

Practical Netty (3) 在Netty中使用Protobuf

Practical Netty (3) 在Netty中使用Protobuf 作者&#xff1a;柳大Poechant&#xff08;钟超&#xff09;邮箱&#xff1a;zhongchao.ustc#gmail.com&#xff08;# -> &#xff09;博客&#xff1a;Blog.CSDN.net/Poechant 微博&#xff1a;weibo.com/lauginhom 日期&#x…
阅读更多...
Atom改国内源

Atom改国内源

linux #进入目录 cd /home/你的用户名/.atom#创建文件并编辑 vim .apmrc#添加国内源 registryhttps://registry.npm.taobao.org#保存退出#测试是否成功 apm install --check windows #进入目录 找到C:\Users\用户名\.atom目录#创建名为 .apmrc 的文件并编辑#添加国内源 registr…
阅读更多...
几种JAVA加密算法

几种JAVA加密算法

1. MD5加密&#xff0c;常用于加密用户名密码&#xff0c;当用户验证时。　 　protected byte[] encrypt(byte[] obj) ...{ 　　try ...{ 　　MessageDigest md5 MessageDigest.getInstance("MD5"); 　　md5.update(obj); 　　return md5.digest(); 　　} catch (No…
阅读更多...
Asky极简教程：零基础1小时学编程（已更新前8节）

Asky极简教程：零基础1小时学编程（已更新前8节）

Asky极简架构 开源Asky极简架构、超轻量级、高并发、水平扩展、微服务架构 《Asky极简教程&#xff1a;零基础1小时学编程》开源教程 零基础入门&#xff0c;从零开始全程演示&#xff0c;如何开发一个大型互联网系统&#xff0c;开源教程 开源代码 开源解决方案零基础1小时学…
阅读更多...
[算法]两数之和，三数之和

[算法]两数之和，三数之和

1. 两数之和 给定一个整数数组和一个目标值&#xff0c;找出数组中和为目标值的两个数。 你可以假设每个输入只对应一种答案&#xff0c;且同样的元素不能被重复利用。 示例: 给定 nums [2, 7, 11, 15], target 9因为 nums[0] nums[1] 2 7 9 所以返回 [0, 1] LeetCode&am…
阅读更多...
最新文章

Copyright @ 2022~2023