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学习笔记(六) Date 日期类型
Jun 19 Javascript
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
Angular排序实例详解
Jun 28 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
layui树形菜单动态遍历的例子
Sep 23 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 Javascript
JS实现购物车基本功能
Nov 08 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
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中改变图片的尺寸大小的代码
2011/07/17 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
详解jQuery中的事件
2016/12/14 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
跟老齐学Python之Python安装
2014/09/12 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
python list转置和前后反转的例子
2019/08/26 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
HTML5通用接口详解
2016/06/12 HTML / CSS
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
财务人员的自我评价范文
2014/03/03 职场文书
公司年会抽奖活动主持词
2014/03/31 职场文书
幼儿园新年寄语
2014/04/03 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
教师党员自我评价范文
2015/03/04 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书
python中print格式化输出的问题
2021/04/16 Python
python获取字符串中的email
2022/03/31 Python
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers