`
maqianli
  • 浏览: 177670 次
  • 性别: Icon_minigender_1
  • 来自: 长春市
社区版块
存档分类
最新评论

动态多附件方式

    博客分类:
  • Jsp
阅读更多

方式一:事先写好多个input.在点击时才显示。也就是说上传的最大个数是写死了的。
html
<p>
<a href='#'> 添加附件 </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>

分享到:
评论

相关推荐

    动态添加附件-上传文件

    总结来说,动态添加附件并上传文件是一个涉及前端交互、文件处理、数据传输和后端存储等多个环节的复杂过程。开发者需要熟练掌握JavaScript、HTML5以及服务器端语言,才能实现这样一个功能,并确保其安全性和用户...

    ASP.NET 多附件上传实现代码

    ***实现多附件上传的代码涉及到前端JavaScript以及后端的***处理技术,能够实现在网页上动态地添加多个文件上传控件,允许用户上传多个文件。这种实现方式在功能上类似于常见的邮件系统或网盘服务中的多文件上传功能...

    jquery动态添加多附件上传实例,开发实例

    本实例聚焦于使用jQuery动态添加多附件上传功能,这是一个常见的需求,特别是在内容管理系统、论坛或者在线表单中。在实际开发中,实现这样一个功能可能会遇到各种挑战,如文件类型检查、文件大小限制、进度显示以及...

    javascript 静态 多附件上传

    首先,"静态"在这里指的是没有依赖服务器端动态脚本的上传方式。这意味着所有的逻辑都在客户端执行,比如通过JavaScript来处理用户选择的文件,而不需要服务器端的实时反馈或处理。 在JavaScript中,实现多附件上传...

    附件精灵forum-attachmen.rar——论坛附件下载工具

    scrrun.dll 和 GetUrl.dll 是动态链接库文件,它们包含了一些必要的函数库,用于支持程序的特定功能。scrrun.dll 通常与VBScript或JScript有关,它提供了对ActiveX脚本的支持。GetUrl.dll 很可能是程序中负责下载...

    asp.net多附件上传实例代码

    在ASP.NET中,多附件上传是一项常见的功能,它允许用户一次性上传多个文件,例如图片、文档或其他类型的文件。本实例代码旨在提供一个详尽的解决方案,涵盖了多种不同的实现方法。以下将详细介绍这些方法及其关键...

    InfoPath 上传多附件解决方法

    针对上述需求,可以通过以下几种方式来实现在InfoPath表单中上传多个附件的功能: ##### 3.1 使用自定义控件 **步骤1:** 开发一个自定义的附件控件,该控件能够动态添加和移除附件输入框。 - **技术选型:** ...

    jquery实现动态添加附件功能

    4. **动态操作DOM**:在添加附件时,可能需要动态地向页面中添加新的表单元素,以便用户可以继续上传更多的文件。 5. **兼容性和安全性**:确保文件上传功能在不同的浏览器上都能正常工作,并且要注意安全性问题,...

    发邮件的动态链接库(支持附件、HTML)

    标题提到的“发邮件的动态链接库(支持附件、HTML)”就是这样一个组件,它允许开发者通过编程方式轻松地发送包含附件和HTML格式内容的邮件。 这个动态链接库适用于VB(Visual Basic)和VC(Visual C++)等编程环境...

    jsp 上传附件,类似163添加附件界面,有上传进度显示

    "jsp上传附件,类似163添加附件界面,有上传进度显示"这一主题,涉及了网页端文件上传的一种实现方式,它借鉴了163邮箱的附件添加功能,并加入了实时的上传进度反馈。下面我们将详细探讨这一技术实现的关键知识点。 ...

    批量下载论坛附件工具

    4. GetUrl.dll:可能是一个动态链接库文件,用于提取论坛附件的URL,是批量下载的关键组件。 5. DownLoadRAR.exe:可能是一个RAR文件的下载器,用于下载和处理RAR格式的附件,这种格式常用于压缩大文件或多个文件。 ...

    js+html+css 实现带有进度条多附件依次上传

    在IT行业中,网页开发是一项核心技能,而上传功能是网页交互中的常见需求。这个项目"js+html+css 实现带有进度条多...通过这种方式实现的多文件上传功能,既实用又直观,可以有效地提高用户在上传大量文件时的满意度。

    树形控件和jquery上传附件

    综上所述,"树形控件和jquery上传附件"这个主题涵盖了前端交互设计、后端数据库操作以及文件上传等多个关键知识点,它们在Web开发中有着广泛的应用。通过熟练掌握这些技术,开发者可以构建更加高效、易用的Web应用。

    126/163网盘附件上传jsp

    - 支持多文件同时上传。 - 自动处理文件大小限制,防止过大文件导致的问题。 - 可以限制上传文件的类型,确保安全。 - 提供错误处理机制,如网络中断、文件不完整等。 - 提供方便的API,如获取上传文件的名称、...

    c#开发html格式邮件并添加附件

    如果需要通过SQL Server的存储过程发送邮件,可以考虑将邮件内容存储在数据库中的一个临时表或变量中,然后在存储过程中动态生成邮件。这样可以避免因内容过长而导致的问题。另外,也可以选择在C#代码中直接发送邮件...

    泛微E9 JS实现流程字段联动出附件图片效果.docx

    接着,我们将这个字段通过字段联动的方式带到流程的文本字段中,这样用户在查看流程信息时就能直接看到IMAGEDOCID。 2. **编写JavaScript代码**: 创建一个名为`流程附件图片js.js`的脚本文件,这里主要编写...

    仿163网盘无刷新多附件上传源码

    【标题】"仿163网盘无刷新多附件上传源码"是一个示例项目,其目标是模拟163网盘的多文件上传功能,同时保持页面无刷新,提供了一个基于JavaScript和JSP实现的解决方案。这个项目的核心在于利用前端技术和后端处理来...

    oracle 发送带附件的邮件

    因此,如果需要发送带有附件的邮件,一般会使用UTL_SMTP,这是一个低级别的接口,可以构建复杂的邮件结构,包括多部分MIME消息,适合添加附件。或者,更常见的方式是通过调用Java存储过程,利用JavaMail API的功能。...

    asp.net带附件邮件发送程序

    如果你想要自定义邮件发送程序,可以参考这个文件进行修改和扩展,例如添加错误处理、支持多个附件或者使用不同的身份验证方式。 总的来说,ASP.NET提供了一种便捷的方式来实现邮件发送功能,包括发送带有附件的...

    asp.net mvc版本 webuploader多附件上传 带进度条

    ASP.NET MVC是一个强大的框架,用于构建动态、数据驱动的Web应用程序。在这个场景中,我们讨论的是如何在ASP.NET MVC项目中实现...通过这种方式,用户可以方便地上传多个文件,并实时看到上传进度,提高了交互体验。

Global site tag (gtag.js) - Google Analytics