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程序设计有所帮助。

(0)

相关推荐

  • JavaScript检测上传文件大小的方法

    本文实例讲述了JavaScript检测上传文件大小的方法.分享给大家供大家参考.具体如下: 通过JS客户端代码限制用户上传文件的大小,但是客户端的验证只是辅助的,服务器端一定还要再做验证 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http

  • javascript实现图片上传前台页面

    这篇文章主要通过代码分析javascript实现图片上传前台页面,废话不多说了,直接贴代码了. 代码示例一: <script> //检查图片的格式是否正确,同时实现预览 function setImagePreview(obj, localImagId, imgObjPreview) { var array = new Array('gif', 'jpeg', 'png', 'jpg', 'bmp'); //可以上传的文件类型 if (obj.value == '') { $.messager

  • Javascript异步表单提交,图片上传,兼容异步模拟ajax技术

    前言: 咋一看标题还挺长的呢,还有这么多功能,其实简化一点就是一个功能,异步表单提交,只是在异步表单提交这个大功能下,可以实现图片上传,模拟ajax技术(其实很早以前就是通过这个方式来实现多浏览器的兼容ajax,这里只是怀怀旧,作为一个技术来玩玩),下面的内容需要有一定的js基础,要不然理解起来会比较困难. 注意事项: 这是我bBank里面的一个方法,现在我把他提取出来成一个通用方法来讲解. bBank 框架介绍:http://www.cnblogs.com/bruceli/archive/20

  • javascript 图片上传预览-兼容标准

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • Javascript图片上传前的本地预览实例

    图片的上传预览功能主要用于图片上传前的一个效果的预览,目前主流的方法主要有js,jquery与flash实现,但我们一般都会使用js来实现图片上传预览功能,下面来看一个例子. 原理: 分为两步:当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL):把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来. 在这里,我们需要了解Javascript里File对象.Blob对象和window.URL.createObjectURL()方法. Fil

  • javascript实现限制上传文件大小

    前言: 项目中经常用到需要上传文件.照片等功能,同时需要限制所上传文件的大小.很多插件都会采用后台请求验证,前端Js校验比较少.本篇介绍一个前端JS便捷判断上传文件大小的方法. 代码很简单,关键就是怎么用JS拿到文件然后获取文件大小,进而去判断拦截.由于各种历史原因,IE的ActiveX控件因素,获取文件的方法可能和其他浏览器有所不同,所以只需稍加判断即可. JS代码: 复制代码 代码如下: <script type="text/javascript">       //

  • FireFox浏览器使用Javascript上传大文件

    本程序是利用3.x的Firefox浏览器可以读取本地文件的特性,实现通过xmlHttPRequest上传大文件功能,并在可以上传过程中动态显示上传进度.略加修改,并与服务器端配合,可以实现断点续传等诸多功能.本例主要是研究FireFox的file-input节点的一些特性,其他客户端应用,如Flash.Sliverlight等,在实现客户端大文件上传时,在数据传输与服务器端存储等方面,与本例的思路基本一致.注意:文件体积似乎有临界点,但这个临界点是多少尚未确认.建议不要用此方法上传超过100M的

  • JavaScript判断文件上传类型的方法

    本文实例展示了JavaScript判断文件上传类型的方法,是一个非常常用的技巧.具体实现方法如下: 文件上传时用到一个功能,使用html元素的input标签实现: <input id="imageFile" name="imageFile1" accept="image/jpg,image/jpeg,image/png,image/bmp,image/gif" type="file" title="点击选择文件

  • JavaScript多图片上传案例

    JS多图片上传小小实例: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>上传多图片</title> <script type="text/javascript"> function JM_wu(ob) { ob.style.display = "none"; } function JM_you(ob) { ob.sty

  • javascript验证上传文件的类型限制必须为某些格式

    复制代码 代码如下: //验证文件的格式 function validateFile(){ var fileObject=$("#filename"); var errorObject=$("#error"); var filepath=fileObject.val(); var fileArr=filepath.split("//"); var fileTArr=fileArr[fileArr.length-1].toLowerCase().s

随机推荐