`
jeasony
  • 浏览: 200589 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

动态多文件上传

    博客分类:
  • js
阅读更多

转载于  Virgo_S

方式一:事先写好多个input.在点击时才显示。也就是说上传的最大个数是写死了的。
html

Java代码 复制代码
  1. <p>   
  2. <a href='#' onclick='javascript:viewnone(more1)'> 添加附件 </a>   
  3. <div id='more1' style='display:none'>   
  4.     <input type="file" name="attach1" size="50"javascript:viewnone(more2)>   
  5.     </span>   
  6. </div>   
  7. <div id='more2' style='display:none'>   
  8.     <input type="file" name="attach2" size="50"'>   
  9. </div>   
  10. </p>  
<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

Java代码 复制代码
  1. <SCRIPT language="javascript">   
  2.   function viewnone(e){   
  3.     e.style.display=(e.style.display=="none")?"":"none";   
  4.   }   
  5. </script>  
<SCRIPT language="javascript">
  function viewnone(e){
    e.style.display=(e.style.display=="none")?"":"none";
  }
</script>




方式二:这种方式的动态多文件上传是实现了的

html

Java代码 复制代码
  1. <input type="button" name="button" value="添加附件" onclick="addInput()">   
  2. <input type="button" name="button" value="删除附件" onclick="deleteInput()">   
  3. <span id="upload"></span>  
<input type="button" name="button" value="添加附件" onclick="addInput()">
<input type="button" name="button" value="删除附件" onclick="deleteInput()">
<span id="upload"></span>


js

Java代码 复制代码
  1. <script type="text/javascript">   
  2.         var attachname = "attach";   
  3.         var i=1;   
  4.           function   addInput(){   
  5.             if(i>0){   
  6.                   var attach = attachname + i ;   
  7.                   if(createInput(attach))   
  8.                       i=i+1;   
  9.               }   
  10.                  
  11.           }    
  12.           function deleteInput(){   
  13.                   if(i>1){   
  14.                     i=i-1;   
  15.                     if(!removeInput())   
  16.                         i=i+1;   
  17.                 }   
  18.           }    
  19.              
  20.           function createInput(nm){      
  21.               var  aElement=document.createElement("input");      
  22.              aElement.name=nm;   
  23.              aElement.id=nm;   
  24.              aElement.type="file";   
  25.              aElement.size="50";   
  26.               //aElement.value="thanks";      
  27.              //aElement.onclick=Function("asdf()");     
  28.                if(document.getElementById("upload").appendChild(aElement) == null)   
  29.                       return false;   
  30.                return true;   
  31.           }     
  32.   
  33.           function removeInput(nm){   
  34.                var aElement = document.getElementById("upload");   
  35.                 if(aElement.removeChild(aElement.lastChild) == null)   
  36.                     return false;   
  37.                 return true;      
  38.           }     
  39.              
  40. </script>  
<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

Java代码 复制代码
  1. <A href="javascript:newUpload();">添加附件</A>   
  2. <TABLE width="100%" border="0" cellpadding="0" cellspacing="1">   
  3.     <TBODY id="fileList"></TBODY>   
  4. </TABLE>   
  5. <DIV id="uploadFiles" style="display:block"></DIV>  
<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

Java代码 复制代码
  1. <SCRIPT language="javascript">   
  2.   
  3.     //---新建上传   
  4.     function newUpload(){   
  5.         var oFileList = document.getElementById("fileList");   
  6.         var fileCount = oFileList.childNodes.length + 1;   
  7.         var oFileInput = newFileInput("upfile_" + fileCount);   
  8.         if(selectFile(oFileInput)){   
  9.             addFile(oFileInput);   
  10.         }   
  11.     }   
  12.        
  13.        
  14.     //----选择文件   
  15.     function selectFile(oFileInput){   
  16.         var oUploadFiles = document.getElementById("uploadFiles");   
  17.         oUploadFiles.appendChild(oFileInput);   
  18.         oFileInput.focus();   
  19.         oFileInput.click();//不能这样做,可能是为了安全着想吧!   
  20.         var fileValue = oFileInput.value;   
  21.         if(fileValue == ""){   
  22.             oUploadFiles.removeChild(oFileInput);   
  23.             return false;   
  24.         }   
  25.         else  
  26.          return true;   
  27.            
  28.     }   
  29.        
  30.     //---新建一个文件显示列表   
  31.     function addFile(oFileInput){   
  32.         var oFileList = document.getElementById("fileList");   
  33.         var fileIndex = oFileList.childNodes.length + 1;   
  34.         var oTR  = document.createElement("TR");   
  35.         var oTD1 = document.createElement("TD");   
  36.         var oTD2 = document.createElement("TD");   
  37.            
  38.         oTR.setAttribute("id","file_" + fileIndex);   
  39.         oTR.setAttribute("bgcolor","#FFFFFF");   
  40.         oTD1.setAttribute("width","6%");   
  41.         oTD2.setAttribute("width","94%");   
  42.         oTD2.setAttribute("align","left");   
  43.         oTD2.innerText = oFileInput.value;   
  44.         oTD1.innerHTML = '<A href="javascript:removeFile('+ fileIndex + ');">删除</A>';   
  45.            
  46.         oTR.appendChild(oTD1);   
  47.         oTR.appendChild(oTD2);   
  48.         oFileList.appendChild(oTR);   
  49.     }   
  50.        
  51.     //---移除上传的文件    
  52.     function removeFile(fileIndex){   
  53.         var oFileInput = document.getElementById("upfile_" + fileIndex);   
  54.         var oTR        = document.getElementById("file_" + fileIndex);   
  55.         uploadFiles.removeChild(oFileInput);   
  56.         fileList.removeChild(oTR);   
  57.     }   
  58.        
  59.     //---创建一个file input对象并返回   
  60.     function newFileInput(_name){   
  61.         var oFileInput  = document.createElement("INPUT");   
  62.         oFileInput.type = "file";   
  63.         oFileInput.id = _name;   
  64.         oFileInput.name = _name;   
  65.         oFileInput.size="50";   
  66.         //oFileInput.setAttribute("id",_name);   
  67.         //oFileInput.setAttribute("name",_name);   
  68.         //oFileInput.outerHTML = '<INPUT type=file id=' + _name + ' name=' + _name + '>';   
  69.         //alert(oFileInput.outerHTML);   
  70.         return oFileInput;   
  71.     }   
  72.        
  73. </SCRIPT>  
分享到:
评论

相关推荐

    动态多文件上传 (超经典)

    在IT行业中,动态多文件上传是一项常见的功能,尤其在网页应用和桌面软件中。这个超经典的实例主要关注如何实现用户可以动态地添加多个文件上传控件,并且在上传时能够附带相关的标题或说明。接下来,我们将深入探讨...

    JSP 动态多文件上传标签

    本知识点聚焦于"JSP动态多文件上传",这是一个常见的功能需求,特别是在用户需要上传多个文件如图片、文档等的场景下。我们将探讨如何利用div、css以及javascript来实现这一功能,同时强调其浏览器兼容性和整合的...

    struts1.2实现动态多文件上传

    在Struts1.2中实现动态多文件上传是一项常见的需求,它允许用户在一次提交中上传多个文件,如图片、文档等。这项功能的实现涉及前端表单设计、后端处理逻辑以及文件存储策略。 首先,我们需要创建一个HTML或JSP页面...

    JSP 动态多文件上传标签库

    动态多文件上传(Dynamic Multiple File Upload)标签库v1.5 功能:实现文件的批量上传,可以对文件格式及数量的限制,可以删除不想上传的文件,在操作过程中不会上传所选文件,JS完全封装,只需要引入相应的JS文件并...

    基于struts动态多文件上传源代码

    在这个"基于Struts动态多文件上传源代码"中,我们可以看到一个实际应用了文件上传功能的示例。在Web应用中,文件上传功能是常见的需求,例如用户上传个人资料、提交作业或者分享文件等。 首先,我们要理解Struts...

    JSP 动态多文件上传标签库v1.5

    动态多文件上传(Dynamic Multiple File Upload)标签库v1.5 功能:实现文件的批量上传,可以对文件格式及数量的限制,可以删除不想上传的文件,在操作过程中不会上传所选文件,JS完全封装,只需要引入相应的JS文件并...

    asp.net支持多文件上传源码

    本文将详细探讨如何在ASP.NET中实现动态多文件上传的功能,并基于源码进行解析。 首先,我们要理解ASP.NET中的文件上传原理。在HTML表单中,`&lt;input type="file" /&gt;`元素允许用户选择本地文件进行上传。在ASP.NET中...

    struts 动态多文件上传

    能同时上传单个文件或多个文件并创建文件夹,可以任意增减文件数目,运行结果

    php 动态多文件上传

    在PHP中实现动态多文件上传是一项常见的任务,尤其在处理用户需要一次性上传多个文件的场景下。这个实例展示了如何结合JavaScript和PHP来实现这一功能。首先,我们来看前端的HTML和JavaScript部分。 前端HTML用于...

    JSP同时选择多文件上传MultifileUploadDemo

    在多文件上传的场景中,JSP主要负责接收和处理来自客户端的文件上传请求。 在"MultifileUploadDemo"中,我们利用了Flash作为前端的上传组件。Flash因其支持多媒体和交互性而被广泛用于创建丰富的互联网应用程序。在...

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

    "JSP多文件上传"是一个常见的需求,特别是在文件分享、在线教育或文档管理等场景。这个功能允许用户一次性选择并上传多个文件,提高了用户体验,减少了多次点击和等待时间。 实现JSP多文件上传,我们需要了解以下几...

    javascript+HTML5 多文件上传(插件)多进度条显示

    在本项目中,"javascript+HTML5 多文件上传(插件)多进度条显示"是一个实现这一功能的实例,它允许用户选择并上传多个文件,并在上传过程中实时显示每个文件及整体的上传进度。下面将详细介绍这个技术实现的关键...

    上传_下载经典案例(支持动态多传,单传)_.NET_C#

    - 动态生成控件:为了支持动态多文件上传,开发者可能在客户端使用JavaScript或jQuery动态生成FileUpload控件,允许用户在页面上添加更多文件选择项。 - 事件驱动编程:C#后端需要监听文件上传事件,对每个上传的...

    jsp多文件上传

    多文件上传允许用户同时选择并上传多个文件,极大地提高了用户体验。HTML5引入了`multiple`属性,使得在input类型的file元素上可以支持多选文件。 4. **plupload**:plupload是一个强大的跨浏览器文件上传插件,...

    struts2实现多文件上传下载

    文件上传比较多,多文件上传少一点 文件下载很少的,看似简单,实则不然 网上的Struts2进行的文件下载一般都是单文件或者固定的文件,并没有(很少)实现随意文件的下载的例子 提供多文件上传,上传成功后,提供...

    多文件上传组件_Flash+ASP实现多文件上传功能

    在IT行业中,多文件上传功能是一项常见的需求,特别是在网站建设和内容管理系统中。本文将深入探讨如何使用Flash+ASP技术来实现这一功能。Flash作为一种曾经广泛使用的交互式内容开发平台,可以提供良好的用户界面和...

    JQuery多文件上传源码

    在Web开发中,多文件上传是一个常见的需求,它允许用户一次性选择并上传多个文件,提高了用户体验。 **jQuery** 是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在这个场景中...

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

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

Global site tag (gtag.js) - Google Analytics