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 精粹笔记
May 09 Javascript
jquery 注意事项与常用语法小结
Jun 07 Javascript
用jquery实现下拉菜单效果的代码
Jul 25 Javascript
说明你的Javascript技术很烂的五个原因
Apr 26 Javascript
JavaScript面向对象之Prototypes和继承
Jul 12 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
浅析Cookie中的Path与domain
Dec 18 Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 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牛逼的面试题分享
2013/01/18 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
javascript中this关键字详解
2016/12/12 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
校园活动策划书范文
2014/01/10 职场文书
2014年高三毕业生自我评价
2014/01/11 职场文书
小组口号大全
2014/06/09 职场文书
数学教师个人总结
2015/02/06 职场文书
招商银行工作证明
2015/06/17 职场文书
休学证明范本
2015/06/19 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
Python基础详解之邮件处理
2021/04/28 Python
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript