<html>
</head>
<script language="javascript" type="text/ecmascript">
//======================
//功能:在表单中input file控件
//参数:parentID---要插入input file控件的父元素ID
// inputID----input file控件的ID
//======================
function createInput(parentID,inputFileID){
var parent=$(parentID);//获取父元素

var div=document.createElement("div");//创建一个div容器用于包含input file
var x=parseInt(Math.random()*(80-1))+1;
var divName=inputFileID+x.toString();//随机div容器的名称
div.name=divName;
div.id=divName;

var aElement=document.createElement("input"); //创建input
aElement.name=inputFileID;
aElement.id=inputFileID;
aElement.type="file";//设置类型为file

var delBtn=document.createElement("input");//再创建一个用于删除input file的Button
delBtn.type="button";
delBtn.value="删除";
delBtn.onclick=function(){ removeInput(parentID,divName)};//为button设置onclick方法

div.appendChild(aElement);//将input file加入div容器
div.appendChild(delBtn);//将删除按钮加入div容器
parent.appendChild(div);//将div容器加入父元素
}
//============================
//功能:删除一个包含input file的div 容器
//参数:parentID---input file控件的父元素ID
// DelDivID----个包含input file的div 容器ID
//============================
function removeInput(parentID,DelDivID){
var parent=$(parentID);
parent.removeChild($(DelDivID));
}
//通过元素ID获取文档中的元素
function $(v){return document.getElementById(v);}
</script>
<body>
<div align="left" id="div_Pic" style="border:1px solid #CCCCCC">
<input name="PicFile" type="file" id="ShowPicFile">
</div>
<input type="button" onClick="createInput('div_Pic','PicFile')" name="button" id="button" value="+ 继续添加图片">
</body>
</html>

js动态添加file控件的更多相关文章

  1. 谨记给UpdatePanel中动态添加的控件赋ID

    原文:谨记给UpdatePanel中动态添加的控件赋ID 昨天下定决 心对上次做的布局编辑器控件加以改进,其中最主要变化的就是要完全使用ASP.NET AJAX!但是很遗憾,虽然耳闻已久,但目前对AS ...

  2. ASP.NET动态添加用户控件的方法

    本文实例讲述了ASP.NET动态添加用户控件的方法.分享给大家供大家参考.具体实现方法如下: 为了让用户控件能ASP.NET页面实现动态添加,首先写一个接口IGetUCable,这个接口有一个函数,返 ...

  3. 动态添加easyui 控件

    jquery提供了append,appendTo方法,可以动态添加静态的html文本,在easyui中,要动态添加easyui控件要怎么做呢,下面就来介绍动态添加easyui控件. 使用方法:和添加静 ...

  4. C# WinForm动态添加MSChart控件

    添加mschart.dll动态链接库 添加引用 System.Windows.Forms.DataVisualization     MSChart控件作为方便的用户数据展示控件,可以方便的使用控件提 ...

  5. AngularJS：实现动态添加输入控件功能

    功能要求如下:1.    点击加号可以增加输入框.2.    点击减号可以减少输入框.3.    当输入框只有一个的时候,不能再减少输入框.效果图如下:只有一个输入框有多个输入框 要实现这个功能,可以 ...

  6. AX 用代码创建FORM动态加控件，重载动态添加的控件的方法。

    eg. 范例:class\RFIDReadWriteForm/Build方法. formRun.controlMethodOverload(true); formRun.controlMethodOv ...

  7. duilib 修复CTreeViewUI控件动态添加子控件时,对是否显示判断不足的bug

    转载请说明出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/42264947 这个bug我在仿酷狗开发日志里提到过,不过后来发现修复的不够 ...

  8. AngularJS：实现动态添加输入控件功能（转）

    http://www.cnblogs.com/ilovewindy/p/3849428.html <!DOCTYPE html> <html> <head> < ...

  9. js动态加载控件jsp页面

    例子1:(具体参照drp中的flow_card_add.jsp)<script>    var rowIndex = 0;     function addOneLineOnClick() ...

随机推荐

  1. C# 处理图片 不规则图形裁剪

    最近项目要求实现不规则裁剪功能.本来想用html5的canvas在前端实现的,但是发现有点困难,以下为C#端对图对片的处理. 为了让大家知道下面内容是否是自己想要的,我先发效果图. 原图 通过下面代码 ...

  2. vbs 获取当前目录的实现代码

    CMD当前路径 复制代码 代码如下: test = createobject("Scripting.FileSystemObject").GetFolder(".&quo ...

  3. 用sqlyog远程连接LINUX系统的MYSQL出现错解决方法

    无法给远程连接的用户权限问题.结果这样子操作mysql库,即可解决.在本机登入mysql后,更改 “mysql” 数据库里的 “user” 表里的 “host” 项,从”localhost”改称'%' ...

  4. Illegal mix of collations (utf8_general_ci,IMPLICIT) and (utf8_unicode_ci,IMPLIC

    在mysql5中遇到的问题: Illegal mix of collations (utf8_general_ci,IMPLICIT) and (utf8_unicode_ci,IMPLICIT) f ...

  5. nodejs全局安装与本地安装区别

    本地安装 1. 将安装包放在 ./node_modules 下(运行 npm 命令时所在的目录),如果没有 node_modules 目录,会在当前执行 npm 命令的目录下生成 node_modul ...

  6. 【Machine Learning in Action --2】K-最近邻分类

    1.K-近邻算法(KNN)概述 K-近邻算法采用测量不同特征值之间的距离方法进行分类. 工作原理:存在一个样本数据集合(也称作训练样本集),并且样本集中每个数据都存在标签(即我们知道样本集中每一数据与 ...

  7. listview前几个item的图片怎么是空白的、listview更新了ui不起作用、在handler里更新了UI不起作用

    不是不起作用,不信你可以在更新ui代码附近加输出的log,说明程序是跑到那里了.但是未达到我们的想要的效果. 我们知道在listview里更新UI,listview的适配器Adapter里有个getV ...

  8. viewpager处理（二）：设置当前item时，让viewpager不出现滑动动画

    我们在使用viewpager.setCurrentItem(position);的时候,viewpager出现滑动动画,如何去掉这个动画呢? 可以用viewpager.setCurrentItem(p ...

  9. AJAX程序实验

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 < ...

  10. Response.Flush()

    Response.Buffer=True就是在缓存网页 访问网站一般是程序直接输出网页结果,或从缓存中读取网页结果2种方式.两种方式在速度上是有差异的 设置 Response.Buffer = Tru ...