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


Posted in Javascript onAugust 11, 2015

本文实例讲述了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 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
Oct 23 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
Javascript继承机制详解
May 30 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
js限制文本框只能输入中文的方法
Aug 11 #Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 #Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 #Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 #Javascript
JavaScript SHA512&amp;SHA256加密算法详解
Aug 11 #Javascript
js中 javascript:void(0) 用法详解
Aug 11 #Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 #Javascript
You might like
信用卡效验程序
2006/10/09 PHP
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
基于jquery实现最简单的选项卡切换效果
2016/05/08 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
详解Puppeteer 入门教程
2018/05/09 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
Python 基础教程之包和类的用法
2017/02/23 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
建筑工程毕业生自我鉴定
2014/01/14 职场文书
2014年冬季防火方案
2014/05/21 职场文书
护士求职信范文
2014/05/24 职场文书
活动总结格式
2014/08/30 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
事业单位考察材料范文
2014/12/25 职场文书
趣味运动会口号
2015/12/24 职场文书
作文之亲情600字
2019/09/23 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
Python实现制作销售数据可视化看板详解
2021/11/27 Python
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python