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 相关文章推荐
验证码按回车不变解决方法
Mar 29 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
使用JavaScript实现点击循环切换图片效果
Sep 03 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 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 异常处理实现代码
2009/03/10 PHP
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
Vue实现计算器计算效果
2020/08/17 Javascript
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
Python标准库itertools的使用方法
2020/01/17 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
python音频处理的示例详解
2020/12/23 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
学生会竞选自荐信
2013/10/12 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
《灯光》教学反思
2014/02/08 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
python的html标准库
2022/04/29 Python
Golang并发工具Singleflight
2022/05/06 Golang