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 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
Javascript中的数学函数集合
May 08 Javascript
Javascript 学习书 推荐
Jun 13 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
JavaScript在XHTML中的用法详解
Apr 11 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
node.js中npm包管理工具用法分析
Feb 14 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 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 XML备份Mysql数据库
2009/05/27 PHP
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
php异常处理技术,顶级异常处理器
2012/06/13 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
PHP 中常量的知识整理
2017/04/14 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
python 获取文件列表(或是目录例表)
2009/03/25 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
如何填写个人简历自我评价
2013/12/10 职场文书
心得体会开头
2014/01/01 职场文书
给同事的道歉信
2014/01/11 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
债务授权委托书范本
2014/10/17 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
导游欢迎词范文
2015/01/23 职场文书
护士求职自荐信范文
2015/03/04 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
信息技术课教学反思
2016/02/23 职场文书