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代码
Oct 09 Javascript
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
jquery last-child 列表最后一项的样式
Jan 22 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
js实现短信发送倒计时功能(正则验证)
Feb 10 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
基于jQuery实现可编辑的表格
Dec 11 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 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
PHP attributes()函数讲解
2019/02/03 PHP
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
Javascript获取图片原始宽度和高度的方法详解
2016/09/20 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
Python匿名函数及应用示例
2019/04/09 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
python初步实现word2vec操作
2020/06/09 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
全球性的在线购物网站:Zapals
2017/03/22 全球购物
《我不是最弱小的》教学反思
2014/02/23 职场文书
2014年国庆节演讲稿
2014/09/19 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers