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

2016-02-19 15:53 36 1 收藏

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的JavaScript实现动态增加文件域表单,过去的都会过去,迎接崭新的开始,释放更美好的自己。

【 tulaoshi.com - Web开发 】

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

js代码:

script language="javascript"

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

  var file_count = 0;

  //增加文件 域   

  function additem(id) {

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

    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 += " 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

来源:https://www.tulaoshi.com/n/20160219/1610623.html

延伸阅读
标签: Web开发
JavaScript表单验证年龄,判断一个输入量是否符合年龄,通过正则表达式实现。 //检查年龄 function isAge(str){        var mydate=new Date;        var now=mydate.getFullYear();        if (str now-60 || str now-18){    &...
标签: Web开发
     此前,我曾经写过一个基于JQuery的表单校验 validator.js ,用了一段时间发现出现了一些问题。与大家互相探讨一下。 version: alpha 1.0 举其中一个验证函数为例: ...... function CheckNull(obj, objname){     $(obj).ready( function(){            ...
标签: Web开发
*{ margin:0px;padding:0px;font-size:12px; } input{ width:100px;height:20px;border:1px solid #ccc; } 姓名: 密码: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 比较简单,自己闲着无聊写的,很久没有写过代码了。。。。 
电脑里经常会存储着重要文件,这些文件需要进行加密,有许多方法来实现。但如果想对一个文件夹里的所有文件都进行加密,数量少还可以,要是数量多岂不是得把人累死? 因此,今天我要告诉您一个好方法:给Windows 9x/2000文件夹加密。通过给一个文件夹加密就可使该文件夹里的所有文件得到保护。其工作效果,就是在您双击进入该文件夹时...
标签: Web开发
不像域级有效性检查(field-level validation),表单级有效性检查(form-level validation)将整个表单上的某组(或全部)值作为一个整体分析其一致性。表单级有效性检查一般发生在将一个已完成的Html 表单提交给CGI 程序之前。我们这样做是为了确保用户在将数据发送至服务器之前,已经填写了所有的必填域。 验证整个表单其实相当简...

经验教程

777

收藏

99
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部