多文件上传时，首先要解决的一个问题就是动态去添加或删除文件选择框，原来以为没多么困难的，但是没想到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>
分享到：
相关推荐
总结，实现JavaScript文件上传、添加和删除文件选择框的关键在于理解DOM操作和处理浏览器兼容性问题。通过上述方法，我们可以创建一个在多数现代浏览器中都能正常工作的文件上传组件。然而，对于更复杂的场景，比如...
例如，当用户点击“添加附件”按钮时，JavaScript可以通过创建新的`<input type="file">`元素来添加新的文件选择字段。 2. **事件处理**：JavaScript可以监听用户的交互，如点击事件。当用户选择文件后，可以触发...
描述中的“可以添加删除附件”进一步强调了系统不仅支持批量上传，还允许用户在需要时进行文件管理。 首先，让我们深入了解一下多文件上传的工作原理。在HTML5之前，传统的文件上传控件仅支持单个文件的选择和上传...
- **上传能力**: 支持文件上传，便于快速添加新文件至服务器。 - **创建新内容**: 可以直接通过界面上创建新文件或目录。 #### 2. Control.Filebrowser **简介**: 采用Mootools框架开发的一款文件浏览器控件，提供...
EXT上传组件是一款基于Flash技术的前端文件上传工具，它提供了多文件上传的功能，极大地提升了用户在上传文件时的体验和效率。EXT是一个流行的JavaScript库，主要用于构建富客户端应用程序，而EXT上传组件是EXT库的...
这个组件旨在为用户提供一个简单而强大的方式来处理文件上传，包括选择多个文件、预览、删除以及单个或批量上传等功能。 ### jQuery与Bootstrap的结合 jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件...
3. 添加交互动作：给每一个元件添加交互动作，如 fileButtonChose 文本框主要脚本代码写在了这个元件上，通过 Javascript 模拟了文件选择动作，并把文件名推送给过渡元件。 三、Javascript 代码实现 在 ...
- 文件上传预览：在用户选择文件后显示预览。 - 多步骤操作：分步引导用户完成复杂任务。 ### 结论 JavaScript弹出框架，特别是`lhgdialog`，为网页开发者提供了强大的交互设计工具，使他们能够构建更丰富、更具有...
当文件上传出现问题时，如文件大小超过限制、文件类型不正确等，`jQuery Uploadify` 会触发相应的错误事件，允许开发者向用户显示错误信息或采取其他处理措施。 ### 10. 兼容性考虑 考虑到非 HTML5 浏览器的兼容性...
SwfUpload 是一款开源的Flash上传组件，它允许用户在网页上实现多文件上传功能，尤其适用于需要大文件上传或批量上传的场景。这个技术在Web开发中被广泛应用，因为它可以提供比传统HTML表单上传更好的用户体验。...
总之，Vue.js 结合 Element UI 的 el-upload 组件可以构建一个灵活且功能齐全的文件上传功能，支持动态表格和多文件上传。通过 Vue 的数据绑定、事件处理和组件化特性，可以轻松实现用户界面与业务逻辑的交互。对于...
5. 将新创建的`<input>`文件选择框和删除按钮添加到`<div>`中，然后将这个`<div>`添加到页面上ID为`file`的`<div>`内。 6. 显示上传按钮，因为在添加了新的文件输入项后，用户可能需要提交文件。 在HTML中，`<form>...
这个示例代码集成了多种实用特性，如多文件选择、文件删除、以及预览功能，为用户提供了一种便捷的方式来处理批量文件上传的需求。下面我们将深入探讨其中涉及的技术和知识点。 1. **HTML**： HTML（超文本标记...
ASP.NET多文件上传是Web开发中的一个重要功能，它允许用户一次性选择并上传多个文件到服务器。在ASP.NET框架中，实现这一功能涉及到多种技术与组件的结合，包括HTML5、JavaScript、AJAX以及服务器端的处理。下面我们...
在这个名为“mui调用手机摄像头及多文件上传.zip”的压缩包中，包含的资源和代码示例应该详细解释了如何使用`mui`实现这些操作。现在，我们将深入探讨这些关键知识点。 1. **mui框架**：`mui` 是一款基于HTML5和CSS...
7. **前端交互**：在用户界面，通常会有文件选择框和上传按钮，用户点击按钮触发文件选择对话框，选择文件后开始上传。前端代码需要处理这些事件，与后台进行通信，同时提供反馈信息，如上传进度、成功或失败提示等...
在IT行业中，文件上传和下载是网页应用中的常见功能，特别是在云存储、文件分享和协作平台等场景下。"不用刷新页面的文件上传和下载"技术使得用户可以在不中断当前浏览体验的情况下完成文件操作，提高了交互性和用户...
总结来说，`gridview实现文件上传下载`这个示例教会我们如何在ASP.NET Web Forms应用中使用`GridView`控件结合`FileUpload`控件实现文件上传，并通过创建下载链接实现文件的下载。这涉及到前端和后端的配合，包括UI...