js动态添加file控件

<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控件

时间: 2024-10-14 00:33:18

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

C# WinForm动态添加MSChart控件

添加mschart.dll动态链接库 添加引用 System.Windows.Forms.DataVisualization MSChart控件作为方便的用户数据展示控件,可以方便的使用控件提供的形状和展示形式展示数据,早Web应用中用的比较多,这几天一直在做一个基于Winform的CS结构的演示程序,用到了MSChart,由于一直也不太熟悉MSChart,又是动态自定义添加,所以一点一点的摸索着做起来,动态添加自定义的MSChart到WinForm程序中,上代码: 1.创建一条曲线形式的Cha

js动态加载控件jsp页面

例子1:(具体参照drp中的flow_card_add.jsp)<script>    var rowIndex = 0;     function addOneLineOnClick() {        var row=tblFlowCardDetail.insertRow(tblFlowCardDetail.rows.length);        var col = row.insertCell(0);        col.innerHTML = "<input ty

AngularJS:实现动态添加输入控件功能(转)

http://www.cnblogs.com/ilovewindy/p/3849428.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://code.jquery.com/jquery.js"></script> <script s

VB动态添加WebBrowser控件,并拦截弹出窗口(不用引用任何组件)

新建空白窗体,然后粘帖下面代码: 1 Option Explicit 2 Public WithEvents br As VBControlExtender 3 4 Private Sub br_ObjectEvent(Info As EventInfo) 5 If Info.Name = "NewWindow2" Then 6 'Dim fm As New Form1 7 'fm.Show 8 'Info.EventParameters(0) = br.object ‘根据需要可实现

easyui表单多重验证,动态设置easyui控件

要实现的功能:在做添加学生信息的时候,利用easyui的验证功能判断 学号是否重复和学号只能为数字 最终效果如下图: 但在做这个的过程中,遇到了一系列的问题: 扩展validatebox的验证方法,最开始的验证代码如下: 1 //学号格式只能为数字 ****//这里没有问题**** 2 number: {//value值为文本框中的值 3 validator: function (value) { 4 var reg = /^[0-9]*$/; 5 return reg.test(value);

asp.net动态增加服务器端控件并提交表单

为什么要用原生的呢? 1.目的 原生出现浏览器兼容性问题 极少,不用测试多浏览兼容性 .需要考虑到市面上的其他垃圾浏览器. 2.性能不好 如果不考虑第一条 你可以换一种方式 直接上代码 .aspx页面 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-

MyEclipse添加JS插件(Spket控件)

一.安装Spket 网上更新方式 1.插件首页:http://www.spket.com        2.插件名称:Spket IDE        3.更新连接(Update Site):http://www.agpad.com/update 更新安装方法: 1.[Help]-[Software Updates]-[Find and Install...] 2.[Search for new features to install] -> [Next] 3.[New Remote Site.

android 动态背景的实现以及SurfaceView中添加EditText控件

      首先还是一贯作风,我们先看案例: 静态图看不出来效果,如果用过此软件(扎客)的同学们都知道,她的背景会动.怎么样,是不是觉得很时尚,起码比静态的要好(个人观点).其实实现起来并 不复杂,这个如果让做游戏程序员做简直太小儿科了,这里我说明一点,其实我们做应用的也应该多少了解下游戏编程思维,起码对我们做应用有很好的帮助. 下面我简单介绍下实现方式. 实现原理:自定义一个SurfaceView控件.对之不停的onDraw,使得其背景动起来. 对于SurfaceView如果不了解的同学们麻烦

Android动态布局,并动态为TextView控件设置drawableLeft、drawableRight等属性添加图标

注:(图中每一个条目和图标都是由代码动态生成) 代码动态布局,并需要为每一个条目设置图标,此时用到了 android:drawableLeft="@drawable/icon"  父xml文件: [html] view plaincopyprint? <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.andr