方式一:事先写好多个input.在点击时才显示。也就是说上传的最大个数是写死了的。
html
<p>
<a href='#' onclick='javascript:viewnone(more1)'> 添加附件 </a>
<div id='more1' style='display:none'>
<input type="file" name="attach1" size="50"javascript:viewnone(more2)>
</span>
</div>
<div id='more2' style='display:none'>
<input type="file" name="attach2" size="50"'>
</div>
</p>js <SCRIPT language="javascript">
function viewnone(e){
e.style.display=(e.style.display=="none")?"":"none";
}
</script>
方式二:这种方式的动态多文件上传是实现了的,很简单的,不说废话看code
html
<input type="button" name="button" value="添加附件" onclick="addInput()">
<input type="button" name="button" value="删除附件" onclick="deleteInput()">
<span id="upload"></span>js
<script type="text/javascript">
var attachname = "attach";
var i=1;
function addInput(){
if(i>0){
var attach = attachname + i ;
if(createInput(attach))
i=i+1;
}
}
function deleteInput(){
if(i>1){
i=i-1;
if(!removeInput())
i=i+1;
}
}
function createInput(nm){
var aElement=document.createElement("input");
aElement.name=nm;
aElement.id=nm;
aElement.type="file";
aElement.size="50";
//aElement.value="thanks";
//aElement.onclick=Function("asdf()");
if(document.getElementById("upload").appendChild(aElement) == null)
return false;
return true;
}
function removeInput(nm){
var aElement = document.getElementById("upload");
if(aElement.removeChild(aElement.lastChild) == null)
return false;
return true;
}
</script>
方式三:动态多文件上传,只是在oFileInput.click();这个地方,这样做就不能上传这个文件了,因为发现它在上传之时就把这个input中的文件置空了。很可能是为了安全着想吧!
另外还有一点就是说,click()只有在ie中才能正常运行。
虽说这种方式最终没能实现上传,但还是留下来参考,看看是否有人可以真正实现上传。
html
<A href="javascript:newUpload();">添加附件</A>
<TABLE width="100%" border="0" cellpadding="0" cellspacing="1">
<TBODY id="fileList"></TBODY>
</TABLE>
<DIV id="uploadFiles" style="display:block"></DIV>js
<SCRIPT language="javascript">
//---新建上传
function newUpload(){
var oFileList = document.getElementById("fileList");
var fileCount = oFileList.childNodes.length + 1;
var oFileInput = newFileInput("upfile_" + fileCount);
if(selectFile(oFileInput)){
addFile(oFileInput);
}
}
//----选择文件
function selectFile(oFileInput){
var oUploadFiles = document.getElementById("uploadFiles");
oUploadFiles.appendChild(oFileInput);
oFileInput.focus();
oFileInput.click();//不能这样做,可能是为了安全着想吧!
var fileValue = oFileInput.value;
if(fileValue == ""){
oUploadFiles.removeChild(oFileInput);
return false;
}
else
return true;
}
//---新建一个文件显示列表
function addFile(oFileInput){
var oFileList = document.getElementById("fileList");
var fileIndex = oFileList.childNodes.length + 1;
var oTR = document.createElement("TR");
var oTD1 = document.createElement("TD");
var oTD2 = document.createElement("TD");
oTR.setAttribute("id","file_" + fileIndex);
oTR.setAttribute("bgcolor","#FFFFFF");
oTD1.setAttribute("width","6%");
oTD2.setAttribute("width","94%");
oTD2.setAttribute("align","left");
oTD2.innerText = oFileInput.value;
oTD1.innerHTML = '<A href="javascript:removeFile('+ fileIndex + ');">删除</A>';
oTR.appendChild(oTD1);
oTR.appendChild(oTD2);
oFileList.appendChild(oTR);
}
//---移除上传的文件
function removeFile(fileIndex){
var oFileInput = document.getElementById("upfile_" + fileIndex);
var oTR = document.getElementById("file_" + fileIndex);
uploadFiles.removeChild(oFileInput);
fileList.removeChild(oTR);
}
//---创建一个file input对象并返回
function newFileInput(_name){
var oFileInput = document.createElement("INPUT");
oFileInput.type = "file";
oFileInput.id = _name;
oFileInput.name = _name;
oFileInput.size="50";
//oFileInput.setAttribute("id",_name);
//oFileInput.setAttribute("name",_name);
//oFileInput.outerHTML = '<INPUT type=file id=' + _name + ' name=' + _name + '>';
//alert(oFileInput.outerHTML);
return oFileInput;
}
</SCRIPT>
分享到:
相关推荐
在实现动态多文件上传时,需要注意以下几个关键点: 1. **HTML5 File API**:HTML5引入了File API,使得前端可以直接操作用户选择的文件,包括读取文件内容、预览图片、检查文件类型等,这对于实现动态多文件上传至...
在“Ext3.0实现多文件上传.rar”这个压缩包中,我们聚焦于一个特定的功能:使用Ext3.0来实现实时的多文件上传功能。这个功能通常在网页应用中用于让用户能够一次性上传多个文件,如图片、文档等,极大地提高了用户...
采用前后端分离的方式进行开发,实现了几种常用的文件上传功能。 前端采用 vue.js + plupload + element-ui 实现了文件在浏览器端的发送, 后端采用 spring boot + spring + spring mvc + mybatis 实现了文件在服务器...
JavaScript多文件上传是一种常见的Web开发功能,允许用户一次性选择并上传多个文件到服务器。这个功能在现代网页应用中尤其重要,比如社交媒体平台、云存储服务和文件协作工具等。在这个场景下,JavaScript作为...
在实现动态文件上传时,主要涉及以下几个关键知识点: 1. **HTML5 File API**:HTML5引入了File API,允许JavaScript直接访问用户选择的文件。`<input type="file">`元素用于让用户选择文件,`files`属性则可以获取...
在多文件上传场景下,Flash允许用户一次性选择多个文件,提供了一种友好的用户体验。Flash上传工具通常通过ActionScript(Flash的编程语言)编写,它可以控制文件的选取、上传过程,并且可以显示上传进度,提升用户...
实现JSP多文件上传,我们需要了解以下几个关键知识点: 1. **HTML表单与多文件选择**: 在HTML中,`<input type="file">`标签用于创建一个文件输入框,用户可以通过它选择文件。要支持多文件上传,需要设置`...
多文件上传组件的实现主要包括以下几个关键点: 1. **HTML5 File API**:HTML5引入了File API,使得JavaScript可以直接访问和操作用户选择的文件。通过`<input type="file">`元素,可以添加`multiple`属性来支持...
与一次性多选文件自动生成多个连接的上传方式不同,这里描述的实现方式更注重于动态管理和控制文件上传的过程。 首先,我们需要了解前端部分的实现。在JavaScript中,HTML5引入了`<input type="file">`元素的...
2. **jQuery插件**:例如`jQuery.form.js`或`jQuery.fileupload.js`,它们提供了方便的API来处理多文件上传。这些插件可以监听文件选择事件,创建FormData对象,将文件数据附加到对象中,并通过Ajax发送到服务器。 ...
对于初学者来说,理解并实现多文件上传是一项重要的技能,它可以帮助你构建交互性强、功能完善的Web应用程序。在这个"C# .NET FileUpload 多文件上传例子"中,我们将探讨两种主要的方法,帮助你理解和掌握这一关键...
多文件上传是Web应用中常见的一种需求,这个项目中提供的实现可能包括以下几个关键部分: 1. **前端界面**:使用HTML5的`<input type="file" multiple>`元素,用户可以选择多个文件进行上传。通常会配合JavaScript...
本文将深入探讨基于C#语言实现的多文件上传控件——Bulk Uploader。C#是一种由微软开发的面向对象的编程语言,它与.NET Framework紧密结合,提供了丰富的类库和工具,如Visual Studio(VS2005),用于高效地开发应用...
插件在JavaScript文件上传中扮演着关键角色,它们通常会提供更丰富的功能和友好的用户界面。在这个主题中,我们提到了几个知名的jQuery插件: 1. **jquery.form.js**:这是一个非常流行的jQuery插件,它可以方便地...
本教程将基于标题“大文件上传,ajax实现,支持10G以上的上传”和描述,详细介绍如何使用AJAX实现大文件上传,并探讨其背后的原理和技巧。 首先,理解大文件上传的关键在于分块上传。当文件过大时,一次性上传整个...
这个系统利用了SpringBoot后端框架和Vue.js前端框架的优势,为处理大文件上传和下载提供了优化的解决方案。以下是对该项目中涉及的主要知识点的详细解释: 1. **SpringBoot**:SpringBoot是Spring框架的一个扩展,...
ExtJS4是一个强大的JavaScript组件库,用于构建富客户端应用,而SWFUpload则是一个流行的选择,用于在浏览器中实现文件上传,特别是支持多文件选择和上传。 首先,让我们了解SWFUpload的基本原理。SWFUpload是基于...
总之,这款基于JavaScript的多附件上传类库是实现高效、用户友好的文件上传功能的重要工具。通过学习和使用它,开发者不仅可以提升自身的JavaScript技能,还能为自己的项目带来更优秀的文件上传体验。
为了解决这个问题,我们可以利用PHP的Alternative PHP Cache (APC) 扩展,它提供了一种处理大文件上传并显示进度条的方法。 首先,我们需要理解为什么PHP需要APC扩展来处理大文件上传。PHP的默认配置中,文件上传...