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获取scrollHeight问题想到的标准问题
May 27 Javascript
javascript Array数组对象的扩展函数代码
May 22 Javascript
js 操作select和option常用代码整理
Dec 13 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
JS实现匀速运动的代码实例
Nov 29 Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 Javascript
jQuery实现的placeholder效果完整实例
Aug 02 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 Javascript
如何用JavaScript检测当前浏览器是无头浏览器
Apr 27 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 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下通过file_get_contents的代理使用方法
2011/02/16 PHP
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
jQuery基于json与cookie实现购物车的方法
2016/04/15 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
Python中正则表达式的用法总结
2019/02/22 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
商务助理岗位职责
2013/11/13 职场文书
优秀党员主要事迹
2014/01/19 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
学生会个人总结范文
2015/02/15 职场文书
综治目标管理责任书
2015/05/11 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
python 如何用terminal输入参数
2021/05/25 Python