`
maqianli
  • 浏览: 175179 次
  • 性别: 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>

分享到:
评论

相关推荐

    excel附件多sheet导出

    在项目过程中需要突然要求支持导出多个sheet的excel附件信息。并且每个sheet中的字段都不一样。 目前的解决方案是 通过配置execl的格式,在后台通过java反射机制动态生成导出对象的方式实现。 上传了源代码,但是...

    php 使用post方式动态响应模板

    发生的纠纷死哦附件偶家反搜if囧2叫附件四偶发if奇偶水电费史蒂夫收到货覅...方式及偶发巨额偶防守打法iOS大佛后为奇偶覅瓯都市覅偶文件佛is见覅偶附件为播放机哦if上见覅偶为奇偶if酒叟if较为哦金佛寺发hi欧国联奇偶就...

    学生信息管理系统-动态链表练习

    本程序是我们老师要求我们作为CAD软件系统的基础练习,主要目的是联系动态链表以及与之相关的一些操作,如添加,查找,删除

    Java调用C语言动态库(JNA方式):回调函数、结构体数组传参、结构体数组返回-附件资源

    Java调用C语言动态库(JNA方式):回调函数、结构体数组传参、结构体数组返回-附件资源

    附件2 XXXX数据共享交换规范.docx

    新建设的各类接口和数据原则上要尽可能进行复用,使用灵活配置的方式管理后续接口和共享数据服务,并进行定期动态更新;确有需要重新开发的,按照共享交换平台的相关规范执行,并纳入管理范畴业务交换类为业务之间有...

    通过AJAX监控文件上传进度

    这个时候如果在文件上传得过程中,给用户一个动态的提示甚至是一个上传的进度条,效果就会好多了,这样就会用到Ajax技术了,让Ajax以一个固定的间隔时间检查上传情况然后在页面以文字或是图片的方式体现出来就行了。...

    图形学实验三动态模型obj

    给定物体的动态序列(见附件),请利用局部光照模型将其渲染。要求: (1) 给场景增加一个平坦的地面模型,增加纹理到地面上更好; (2) 在适当位置设置两个光源; (3) 启用消隐功能; (4) 按动画方式输出:即采用...

    基于arduino单片机SPI的OLED动态显示程序

    该代码是基于arduino单片机SPI总线的OLED动态显示代码,接线方式附件TXT文件有,不足之处望下载者及时联系我。

    【项目附件】基于微服务的仿抖音APP应用的设计与开发.zip

    2、基于Spring Cloud Alibaba 微服务生态,使用Nacos进行服务集群和动态配置管理,使用Duubo实现微服务模块间的通信; 3、设计基于腾讯云的短信服务实现手机号码注册登录,并用Redis存储验证码,实现60s限制拦截,多...

    战德臣教授数据库系统设计教程视频数据库系统上中下三部

    模型与语言&gt;000-数据库系统课程简要介绍.mp4&lt;第10讲 嵌入式SQL语言之动态SQL&gt;A00-本讲学习什么.mp4A01-动态SQL的概念和作用.mp4A02-动态SQL构造示例之一.mp4A03-动态SQL构造示例之二.mp4A04-动态SQL的两种执行方式....

    word-export:SpringBoot项目实现导出word的两种方式(文本、动态行表格、循环列表下的动态行表格、合并单元格)

    SpringBoot项目实现导出word的两种方式: 1.SpringBoot + poi-tl 根据word模板动态生成word(文本、动态行表格、循环列表下的动态行表格、合并单元格) 2.SpringBoot + easypoi 根据word模板动态生成word(文本、...

    网店模板完整程序下载

    商店可以发布不同的公告信息并以滚动形式在页面显示,让顾客更快了解商店动态信息、了解最新产品信息。 ·集成新闻系统 管理员可在一个新闻系统中对网店的所有的信息发布栏目进行管理,提高网店管理的效率。 ·...

    PDF文件自动处理工具Gillmeister Automatic PDF Processor.rar

    其中任意数量的文件夹监控功能,以便自动打印、重命名或移动传入的PDF文件到动态命名的文件夹,并以结构化方式存储PDF文件,除了内容之外,AutomaticPDFProcessor还可以使用PDF文档的许多元数据,例如在文件路径中...

    免费网店·net程序下载

    网奇Eshop系统全部版本都使用模板与程序分离的方式构建,与传统的模板技术相比更快捷,内容修改也更容易,自新版以来,彻底支持多模板、多语言和多风格,每个模板可使用不同的语言界面,不同的内码设定和不同的风格...

    ·net网上商城管理系统

    商店可以发布不同的公告信息并以滚动形式在页面显示,让顾客更快了解商店动态信息、了解最新产品信息。 ·集成新闻系统 管理员可在一个新闻系统中对网店的所有的信息发布栏目进行管理,提高网店管理的效率。 ·...

    某公司动态股权激励方案.doc

    公司鼓励他们不断追求并实现个人事业上的更大成就,承诺对他们曾做出和正在做出的成绩给予正常薪酬体系外的专项短期和中长期激励,并为达到规定业绩条件或排名的优秀员工,采取一定方式将他们纳入到与核心人员相同的...

    国内最好的·net网店系统

    ·商品可扩展无限多个属性 商品的属性千变万化,这里你可以无限制的扩展商品的属性。如电脑整机,您可以扩展CPU、内存、硬盘等商品属性。 ·支持附件销售功能 添加扩展属性的同时还可以指定价格,当顾客购买商品...

    免费网店模板代码下载

    ·商品可扩展无限多个属性 商品的属性千变万化,这里你可以无限制的扩展商品的属性。如电脑整机,您可以扩展CPU、内存、硬盘等商品属性。 ·支持附件销售功能 添加扩展属性的同时还可以指定价格,当顾客购买商品...

    淘宝网店装修软件下载

    网奇Eshop内置了多种数字图形统计工具,为您的商城经营提供准确的数据依据,并集成了51.La等流量统计系统,可随时检测您网站的最新访问动态。 ·预付款购物功能 会员可以有预付款,并可以通过预付款进行购物。 ...

Global site tag (gtag.js) - Google Analytics