`

几种js实现的动态多文件上传

阅读更多
方式一:事先写好多个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实现多文件上传.rar”这个压缩包中,我们聚焦于一个特定的功能:使用Ext3.0来实现实时的多文件上传功能。这个功能通常在网页应用中用于让用户能够一次性上传多个文件,如图片、文档等,极大地提高了用户...

    基于SpringBoot的文件上传系统,前后端分离,单文件上传,多文件上传,大文件上传,断点续传,文件秒传,图片上传

    采用前后端分离的方式进行开发,实现了几种常用的文件上传功能。 前端采用 vue.js + plupload + element-ui 实现了文件在浏览器端的发送, 后端采用 spring boot + spring + spring mvc + mybatis 实现了文件在服务器...

    JavaScript多文件上传

    JavaScript多文件上传是一种常见的Web开发功能,允许用户一次性选择并上传多个文件到服务器。这个功能在现代网页应用中尤其重要,比如社交媒体平台、云存储服务和文件协作工具等。在这个场景下,JavaScript作为...

    javaScript 与 jquery实现动态的文件上传

    在实现动态文件上传时,主要涉及以下几个关键知识点: 1. **HTML5 File API**:HTML5引入了File API,允许JavaScript直接访问用户选择的文件。`&lt;input type="file"&gt;`元素用于让用户选择文件,`files`属性则可以获取...

    JSP同时选择多文件上传MultifileUploadDemo

    在多文件上传场景下,Flash允许用户一次性选择多个文件,提供了一种友好的用户体验。Flash上传工具通常通过ActionScript(Flash的编程语言)编写,它可以控制文件的选取、上传过程,并且可以显示上传进度,提升用户...

    JSP多文件上传(同时上传)

    实现JSP多文件上传,我们需要了解以下几个关键知识点: 1. **HTML表单与多文件选择**: 在HTML中,`&lt;input type="file"&gt;`标签用于创建一个文件输入框,用户可以通过它选择文件。要支持多文件上传,需要设置`...

    js 多文件上传 组件

    多文件上传组件的实现主要包括以下几个关键点: 1. **HTML5 File API**:HTML5引入了File API,使得JavaScript可以直接访问和操作用户选择的文件。通过`&lt;input type="file"&gt;`元素,可以添加`multiple`属性来支持...

    ASP.net实现多文件上传

    与一次性多选文件自动生成多个连接的上传方式不同,这里描述的实现方式更注重于动态管理和控制文件上传的过程。 首先,我们需要了解前端部分的实现。在JavaScript中,HTML5引入了`&lt;input type="file"&gt;`元素的...

    PHP多文件上传插件,PHP+jQuery+Ajax多图片上传

    2. **jQuery插件**:例如`jQuery.form.js`或`jQuery.fileupload.js`,它们提供了方便的API来处理多文件上传。这些插件可以监听文件选择事件,创建FormData对象,将文件数据附加到对象中,并通过Ajax发送到服务器。 ...

    C# .NET FileUpload 多文件上传例子

    对于初学者来说,理解并实现多文件上传是一项重要的技能,它可以帮助你构建交互性强、功能完善的Web应用程序。在这个"C# .NET FileUpload 多文件上传例子"中,我们将探讨两种主要的方法,帮助你理解和掌握这一关键...

    SSM框架实现多文件上传,框架可以直接开发项目

    多文件上传是Web应用中常见的一种需求,这个项目中提供的实现可能包括以下几个关键部分: 1. **前端界面**:使用HTML5的`&lt;input type="file" multiple&gt;`元素,用户可以选择多个文件进行上传。通常会配合JavaScript...

    基于C#+实现的多文件上传控件Bulk Uploader 源代码

    本文将深入探讨基于C#语言实现的多文件上传控件——Bulk Uploader。C#是一种由微软开发的面向对象的编程语言,它与.NET Framework紧密结合,提供了丰富的类库和工具,如Visual Studio(VS2005),用于高效地开发应用...

    js_multiple上传文件

    插件在JavaScript文件上传中扮演着关键角色,它们通常会提供更丰富的功能和友好的用户界面。在这个主题中,我们提到了几个知名的jQuery插件: 1. **jquery.form.js**:这是一个非常流行的jQuery插件,它可以方便地...

    大文件上传, ajax 实现, 支持10G以上的上传

    本教程将基于标题“大文件上传,ajax实现,支持10G以上的上传”和描述,详细介绍如何使用AJAX实现大文件上传,并探讨其背后的原理和技巧。 首先,理解大文件上传的关键在于分块上传。当文件过大时,一次性上传整个...

    springboot+vue实现超大文件分片极速上传与下载完整前后端源码

    这个系统利用了SpringBoot后端框架和Vue.js前端框架的优势,为处理大文件上传和下载提供了优化的解决方案。以下是对该项目中涉及的主要知识点的详细解释: 1. **SpringBoot**:SpringBoot是Spring框架的一个扩展,...

    Extjs4 swfupload 多文件上传

    ExtJS4是一个强大的JavaScript组件库,用于构建富客户端应用,而SWFUpload则是一个流行的选择,用于在浏览器中实现文件上传,特别是支持多文件选择和上传。 首先,让我们了解SWFUpload的基本原理。SWFUpload是基于...

    一款基于JavaScript实现的多附件上传表单添加类库源码及例子程序

    总之,这款基于JavaScript的多附件上传类库是实现高效、用户友好的文件上传功能的重要工具。通过学习和使用它,开发者不仅可以提升自身的JavaScript技能,还能为自己的项目带来更优秀的文件上传体验。

    php实现大文件上传带进度条

    为了解决这个问题,我们可以利用PHP的Alternative PHP Cache (APC) 扩展,它提供了一种处理大文件上传并显示进度条的方法。 首先,我们需要理解为什么PHP需要APC扩展来处理大文件上传。PHP的默认配置中,文件上传...

Global site tag (gtag.js) - Google Analytics