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类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
推荐20家国外的脚本下载网站
Apr 28 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 Javascript
js实现时间日期校验
May 26 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 Javascript
JavaScript实现图片合成下载的示例
Nov 19 Javascript
vue/cli 配置动态代理无需重启服务的方法
May 20 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
eWebEditor v3.8 商业完整版 (PHP)
2006/12/06 PHP
php中strtotime函数性能分析
2016/11/20 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
javascript实现画板功能
2020/04/12 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
原生js实现购物车功能
2020/09/23 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
python中os模块详解
2016/10/14 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
简单谈谈python中的语句和语法
2017/08/10 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
python实现五子棋人机对战游戏
2020/03/25 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
Python进行特征提取的示例代码
2020/10/15 Python
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
运动会通讯稿100字
2014/01/31 职场文书
环保倡议书怎么写
2014/05/16 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL