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 相关文章推荐
JavaScript的Function详细
Nov 14 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
微信小程序实现上传图片功能
May 28 Javascript
vue+axios+promise实际开发用法详解
Oct 15 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
vue proxy 的优势与使用场景实现
Jun 15 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
PHP常用函数小技巧
2008/09/11 PHP
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
smarty中js的调用方法示例
2014/10/27 PHP
php随机抽奖实例分析
2015/03/04 PHP
php实用代码片段整理
2016/11/12 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
javascript 动态生成私有变量访问器
2009/12/06 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
js实现3D旋转相册
2020/08/02 Javascript
Python的另外几种语言实现
2015/01/29 Python
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
你真的了解Python的random模块吗?
2017/12/12 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
安全资金保障制度
2014/01/23 职场文书
服务员岗位责任制
2014/02/11 职场文书
毕业生写求职信的要点
2014/03/04 职场文书
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
2016公司年会通知范文
2015/04/25 职场文书
《社戏》教学反思
2016/02/22 职场文书
高质量“欢迎词”
2019/04/03 职场文书