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实现简单模态窗口,背景灰显
Nov 14 Javascript
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
jQuery中常用动画效果函数(日常整理)
Sep 17 Javascript
Vue 实用分页paging实例代码
Apr 12 Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 Javascript
微信小程序实现随机验证码功能
Dec 20 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
JS事件流与事件处理程序实例分析
Aug 16 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 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加入ftp扩展的解决方法
2013/02/07 PHP
浅谈php自定义错误日志
2015/02/13 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
jQuery中的jQuery()方法用法分析
2014/12/27 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
jQuery.parseJSON()函数详解
2019/02/28 jQuery
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
Python collections模块实例讲解
2014/04/07 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
Python异常处理操作实例详解
2018/05/10 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
python -v 报错问题的解决方法
2020/09/15 Python
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
如何清空Session
2015/02/23 面试题
化工机械应届生求职信
2013/11/04 职场文书
中层干部岗位职责
2013/12/18 职场文书
小学生操行评语
2014/04/22 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
公司放假通知怎么写
2015/04/15 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书
Python机器学习之基础概述
2021/05/19 Python
Java实现给Word文件添加文字水印
2022/02/15 Java/Android
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏