`
ganglong99
  • 浏览: 162006 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

JavaScript实现动态增加文件域表单

阅读更多

对于上传多个文件,可以通过js来动态生成文件域,下面是源代码,收藏在这里,供以后直接使用,hoho!

 

js代码:

<script language="javascript">

  //全局变量,代表文件域的个数,并用该变量区分文件域的name属性

  var file_count = 0;

  //增加文件 域    

  function additem(id) {

    if (file_count > 9) {

      alert("最u22810 10个u25991 件u22495 ");

      return;

  }

  //定义行变量row;单元格变量cell;单元格内容变量str。

  var row,cell,str;

  //在指定id的table中插入一行

  row = eval("document.all["+'"'+id+'"'+"]").insertRow();

  if(row != null ) {

    //设置行的背景颜色

    row.bgColor="white";

    //在行中插入单元格

    cell = row.insertCell();

    //设置str的值,包括一个文件域和一个删除按钮

    str='<input onselectstart="return false" class="tf" onpaste="return false" type="file"  name="file[' + file_count + ']" style="width:500px" onkeydown="return false;"/>';

    str += "&nbsp;<input type="+'"'+"button"+'"'+" value="+'"'+"删除"+'"'+"   onclick='deleteitem(this,"+'"'+"tb"+'"'+");'>";

    //文件域个数增加

    file_count++;

    //设置单元格的innerHTML为str的内容

    cell.innerHTML=str;

  }

}
   //删除文件域 
   function deleteitem(obj,id) {
     var rowNum,curRow;
     curRow = obj.parentNode.parentNode;
     rowNum = eval("document.all."+id).rows.length - 1;
     eval("document.all["+'"'+id+'"'+"]").deleteRow(curRow.rowIndex);
     file_count--;
   }
</script>

  

html代码:

 <input type=button value="增加" onclick='additem("tb")'/><br/>
 <table cellspacing="0" id="tb" style="width:400px">
 </table>

 

分享到:
评论

相关推荐

    js实现动态增加文件域表单功能

    综上所述,本文介绍了一个使用JavaScript实现动态增加文件域表单的实例,通过这个实例,我们可以了解动态表单元素添加和删除的原理和方法。理解这些基础知识对于前端开发人员来说是非常重要的,因为它可以大大提高...

    7种时尚的文件上传表单域美化特效

    本文将探讨7种时尚的文件上传表单域美化特效,提升用户体验,使文件上传变得更具吸引力。 1. **隐藏默认样式**: 首先,我们可以使用CSS来隐藏默认的文件选择按钮,然后用自定义的图形或文字替换它。通过设置 `...

    7种时尚的文件上传表单域美化特效.zip

    总的来说,这个压缩包提供了一套完整的解决方案,让开发者能够在他们的网站上轻松添加时尚的文件上传表单域。通过研究和使用这些资源,你可以学习到如何利用Bootstrap和jQuery来创建交互式和视觉上吸引人的上传功能...

    表单事件jQuery文件域美化File Style Demo演示

    在网页设计中,表单元素是用户与网站交互的重要途径,而文件域(File Input)则是用户上传文件的关键组件。然而,原始的文件域样式通常简单且不美观,不符合现代网页设计的高要求。"表单事件jQuery文件域美化File ...

    js实现文件上传表单域美化特效

    一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程。 先上几个效果饱饱眼福: 使用方法 这些文件上传域的美化使用的方法都是隐藏原生的&lt;input type=”file”&gt;元素,然后使用一个元素来...

    javascript表单域与json数据间的交互第1 3页.docx

    本文将详细介绍如何在JavaScript中实现表单域与JSON数据间的交互,主要包括两个方面:一是如何将JSON对象数据设置到表单域中;二是如何将表单数据转换为JSON对象。 #### 将JSON对象数据设置到表单域中 此过程涉及...

    了解JavaScript表单操作和表单域

    JavaScript中的表单操作和表单域是Web开发中不可或缺的部分,...总的来说,JavaScript中的表单操作和表单域是实现用户交互和数据传递的关键,理解并熟练运用这些知识,可以帮助开发者创建更动态、功能丰富的网页应用。

    动态增加/删除文件域

    动态增加或删除文件域指的是根据用户的操作或程序的逻辑在页面上添加或移除这种上传功能的区域。 描述中提到了LEDADBBS网友分享的代码,这可能是一个具体的实现示例,但由于内容不完整,我们不能直接分析代码。但是...

    Javascript资料

    2. **对象和数组**:JavaScript中的对象是一种动态的数据结构,它允许我们存储和操作键值对。数组则用于存储一组有序的值,它们提供了多种操作方法,如push、pop、slice等。 3. **作用域和闭包**:理解作用域对于...

    验证表单组件(js实现)

    - `文件域客户端验证.html`:文件上传表单的验证,可能包括文件类型、大小等限制。 - `jquery.js`:jQuery库,简化DOM操作和事件处理,使得验证代码更加简洁易读。 4. **基本验证技术** - 正则表达式:用于检查...

    使用ajax实现上传文件的功能

    1. JavaScript文件上传的实现方式: JavaScript提供了多种方式来实现文件上传,但在异步上传文件的场景下,通常会结合使用AJAX技术。文中展示了如何利用jQuery和JavaScript原生的FormData对象来创建一个隐藏的表单,...

    ext 文件输入域控件

    在EXTJS中,`InputField.js`可能是一个包含文件输入域控件实现的源代码文件。开发者可以通过阅读这个源代码来了解其内部工作机制,包括如何创建控件实例,如何定义属性(如accept,用来指定可接受的文件类型),以及...

    全站开发javascript

    JavaScript是一种广泛应用于网络开发中的编程语言,它的作用主要是为网页添加交互性和动态效果。随着互联网技术的发展,JavaScript已经不仅仅局限于前端开发,它的应用范围逐渐扩展到了后端、服务器端以及移动端开发...

    真正实现ajax上传文件 兼容IE6789火狐谷歌世界之窗

    在"uploaddemo"这个压缩包中,可能包含了实现上述功能的示例代码,包括HTML、CSS和JavaScript文件。你可以通过查看和运行这些文件来更深入地了解Ajax文件上传的实现。 总之,实现Ajax上传文件并兼容各种浏览器是一...

    javascript源代码_经典实例100.rar

    JavaScript是一种广泛应用于网页和网络应用的脚本语言,它在客户端运行,为用户提供动态交互体验。这个名为"javascript源代码_经典实例100.rar"的压缩包文件包含了一百个JavaScript的经典实例,旨在帮助开发者深入...

    jQuery自定义表单添加删除代码.zip

    本项目“jQuery自定义表单添加删除代码”基于jQuery 1.10.2版本,旨在实现动态地向表单中添加或删除输入元素,以及自定义标题和附件功能,这对于创建灵活的用户交互界面特别有用。以下将详细解析这个项目的重点内容...

Global site tag (gtag.js) - Google Analytics