JavaScript设置表单上传时文件个数的方法

 更新时间:2015年08月11日 12:44:52   作者:皮蛋  
这篇文章主要介绍了JavaScript设置表单上传时文件个数的方法,可实现动态增加及删除表单上传按钮的功能,非常简单实用,需要的朋友可以参考下

本文实例讲述了JavaScript设置表单上传时文件个数的方法。分享给大家供大家参考。具体如下:

这是一个比较实用的功能,用JavaScript来设置表单上传文件时,根据需要生成上传表单,要几个生成几个,在网易邮箱、新浪邮箱的添加附件功能里都有这种功能,不过这一款没有删除表单的功能,如果输入的多了,只好重新来过啦

运行效果如下图所示:

具体代码如下:

<title>JavaScript设置表单上传时的文件个数</title>
<input type="button" name="button" value="添加附件" onclick="addInput()">
<input type="button" name="button" value="删除附件" onclick="deleteInput()">
<span id="upload"></span>
<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>

希望本文所述对大家的javascript程序设计有所帮助。

相关文章

  • 当前流行的JavaScript代码风格指南

    当前流行的JavaScript代码风格指南

    这篇文章主要介绍了当前流行的JavaScript代码风格指南,同时推荐了一款风格检验工具jshint,可以配合大多数的编辑器统一团队代码风格,需要的朋友可以参考下
    2014-09-09
  • js中的document.querySelector()方法举例详解

    js中的document.querySelector()方法举例详解

    这篇文章主要给大家介绍了关于js中document.querySelector()方法的相关资料,document.querySelector是JavaScript中的一个内置方法,用于通过CSS选择器选择文档中的第一个匹配元素,需要的朋友可以参考下
    2024-01-01
  • JavaScript装箱及拆箱boxing及unBoxing用法解析

    JavaScript装箱及拆箱boxing及unBoxing用法解析

    这篇文章主要介绍了JavaScript装箱及拆箱boxing及unBoxing用法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • 微信小程序实现写入读取缓存详解

    微信小程序实现写入读取缓存详解

    这篇文章主要介绍了微信小程序实现写入缓存与读取缓存详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • JavaScript基于面向对象实现的猜拳游戏

    JavaScript基于面向对象实现的猜拳游戏

    这篇文章主要介绍了JavaScript基于面向对象实现的猜拳游戏,结合完整实例形式分析了javascript基于面向对象实现猜拳游戏的具体页面布局、样式及功能相关操作技巧,需要的朋友可以参考下
    2018-01-01
  • Bootstrap CSS组件之按钮下拉菜单

    Bootstrap CSS组件之按钮下拉菜单

    这篇文章主要为大家详细介绍了Bootstrap CSS组件之按钮下拉菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JavaScript中数据结构与算法(三):链表

    JavaScript中数据结构与算法(三):链表

    这篇文章主要介绍了JavaScript中数据结构与算法(三):链表,本文分别讲解了单链表与双链表以及增加节和删除节的代码实例,需要的朋友可以参考下
    2015-06-06
  • 关于redux-saga中take使用方法详解

    关于redux-saga中take使用方法详解

    本篇文章主要介绍了关于redux-saga中take使用方法详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • webpack中CommonsChunkPlugin详细教程(小结)

    webpack中CommonsChunkPlugin详细教程(小结)

    本篇文章主要介绍了webpack中CommonsChunkPlugin详细教程(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • javascript之DIV拖动类 支持在FF下拖动,调用简单

    javascript之DIV拖动类 支持在FF下拖动,调用简单

    javascript之DIV拖动类 支持在FF下拖动,调用简单...
    2007-08-08

最新评论