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 相关文章推荐
提高网站信任度的技巧
Oct 17 Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
别了 JavaScript中的isXX系列
Aug 01 Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
webpack4实现不同的导出类型
Apr 09 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
Vue引入Stylus知识点总结
Jan 16 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 27 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
PHP Array交叉表实现代码
2010/08/05 PHP
深入PHP5中的魔术方法详解
2013/06/17 PHP
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
js 中的switch表达式使用示例
2020/06/03 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
纯javascript版日历控件
2016/11/24 Javascript
jQuery实现简易的输入框字数计数功能示例
2017/01/16 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
python selenium firefox使用详解
2019/02/26 Python
Python内置函数property()如何使用
2020/09/01 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
税务会计岗位职责
2014/02/18 职场文书
婚礼秀策划方案
2014/05/19 职场文书
教师节感恩老师演讲稿
2014/08/28 职场文书
先进集体事迹材料范文
2014/12/25 职场文书
网络营销计划书
2015/01/17 职场文书
学校端午节活动总结
2015/02/11 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP