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 遍历对象中的子对象
Jul 03 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
js+CSS实现弹出居中背景半透明div层的方法
Feb 26 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
jquery实现垂直手风琴菜单
Mar 04 jQuery
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
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 开发环境配置(Zend Studio)
2010/04/28 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
jQuery TextBox自动完成条
2009/07/22 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
在python的类中动态添加属性与生成对象
2016/09/17 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
大学军训自我鉴定
2013/12/15 职场文书
计划生育宣传标语
2014/06/21 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
捐款通知怎么写
2015/04/24 职场文书
MySQL 不等于的三种使用及区别
2021/06/03 MySQL
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python
MySQL优化及索引解析
2022/03/17 MySQL
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技