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 相关文章推荐
js格式化货币数据实现代码
Sep 04 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
May 10 Javascript
简单实现js放大镜效果
Jul 24 Javascript
Scala解析Json字符串的实例详解
Oct 11 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 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实现给图片加灰色半透明效果的方法
2014/10/20 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
Python实现的检测网站挂马程序
2014/11/30 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
python矩阵的转置和逆转实例
2018/12/12 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
园林施工员岗位职责
2013/12/11 职场文书
项目建议书范文
2014/05/12 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
交心谈心活动总结
2015/05/11 职场文书
趣味运动会赞词
2015/07/22 职场文书
导游词之昭君岛
2020/01/17 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers