`
115893520
  • 浏览: 140407 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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>
 
分享到:
评论

相关推荐

    html5中如何将图片的绝对路径转换成文件对象

    通过添加multipe属性,file控件内允许一次选择多个文件。控件内的每一个用户选择的文件都是一个file对象,而FileList对象则是file对象的列表。代表用户选择的所有文件。我们先来看一个简单的demo,看下file文件对象...

    .net50个常用方法简单华丽的分页控件功能大的分页控件 50个实用方法

    ///ElseDataTimeIng()返回本地电脑的当前日期的年月日时分秒 动态的显示 JS实现 ///ElsePageLoad()页面加载数据加载完成呈现页面 ///ElseCkeck()返回页面验证码图片 使用方法:单独创建一个页面 在首次加载...

    大名鼎鼎SWFUpload- Flash+JS 上传

     SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统&lt;input type="file" /&gt;标签的文件上传模式。 [编辑本段]SWFUpload...

    推荐免费好用的Web在线Office(Word)编辑控件

    LoadDso.js var s = "" s += "; WIDTH: 100%; TOP: 0px; HEIGHT: 100%'" s += "classid=clsid:00460182-9E5E-11D5-B7C8-B8269041DD57 codeBase=DSOFramer.ocx#Version=2,2,0,0' &gt;" s += "&lt;/OBJECT&gt;" document.write...

    net实用类50超级实用方法赠分页分页控件强大的分页

    ///ElseDataTimeIng()返回本地电脑的当前日期的年月日时分秒 动态的显示 JS实现 ///ElsePageLoad()页面加载数据加载完成呈现页面 ///ElseCkeck()返回页面验证码图片 使用方法:单独创建一个页面 在首次加载事件...

    asp.net 无刷新附件上传实现方法

    一直以来附件上传都是个很郁闷的问题,刚开始是利用js添加input file 然后一起提交来实现多文件上传,在使用163邮箱的时候很是羡慕它的附件上传部分(选择完文件就提交,可以多个文件一起上传,而且还可以获取上传...

    简单实用国产jQuery UI框架 - DWZ富客户端框架DWZ RIA 1.4.4 (20121016 修正了横向导航js报错问题)

    DWZ RIA 1.4.4 (20121016 修正了横向导航js报错问题) 修复使用xheditor插件IE下兼容问题:IE下打开一个含有编辑器的页面,然后关闭,再打开不能...日历控件添加动态参数 (具体细节请参考本手册:HTML扩展 -&gt; 日历控件)

    ASP.NET2.0高级编程(第4版)1/6

    第23章 用户控件、服务器控件、  模块和HttpHandler789 23.1 用户控件789 23.1.1 创建用户控件790 23.1.2 与用户控件交互792 23.2 服务器控件794 23.2.1 项目的建立794 23.2.2 控件的属性798 23.2.3 控件的显示799 ...

    asp.net教学讲义

    3.3.3 InputFile控件 42 3.3.4 HtmlGenericControl 控件 43 3.4 ASP.NET2.0新增控件 45 3.4.1 ImageMap控件 45 3.4.2 FileUpload控件 48 3.5 客户端处理 52 3.5.1 第一种方式示例: 52 3.5.2第二种方式:动态注册...

    借助FileUpload控件在Image Rotator中添加图像

    如何借助FileUpload控件在Image Rotator中添加图像

    cypress-file-upload:文件上传测试变得容易

    该软件包添加了一个自定义的命令,使您可以抽象化如何通过HTML控件精确上传文件,并专注于测试用户工作流程。 目录 覆盖文件名 使用空的灯具文件 我想看一些真实的例子 原料药 菜谱 注意事项 它不起作用! 我还能...

    web真实进度条(上传时间,大小,百分比)

    ASP.NET实现进度条上传文件源码 源码说明 该程序采用了jquery框架,实现了小文件上传。 两个地方需要解释 第一,如何知道监听的这个文件就是上传的这个文件实现机制很简单,就是让asp...3.在index.htm中添加file控件

    ASP.NET Night Words

    12.4.2 给图片动态添加水印功能 226 12.4.3 防盗链功能 229 12.5 在iis中配置自己编写的 12.5 httphandler 236 12.6 总结 237 第13章 asp.net中的ajax开发 238 13.1 纯javascript开发ajax应用 238 13.2 第三...

    ASP.NET4高级程序设计第4版 带目录PDF 分卷压缩包 part1

    3.3.3 动态控件的创建 3.4 Page类 3.4.1 Session、Application和Cache 3.4.2 Request 3.4.3 Response 3.4.4 Server 3.4.5 User 3.4.6 Trace 3.4.7 访问其他类中的HTTP上下文 3.5 总结 第4章 ...

    2.ASP.NET.2.0.高级编程(第4版) [1/7]

    4.4 通过JavaScript处理页面和服务器控件 98 4.4.1 使用Page.ClientScript.RegisterClient ScriptBlock 100 4.4.2 使用Page.ClientScript.Register StartupScript 101 4.4.3 使用Page.ClientScript....

    ASP.NET4高级程序设计(第4版) 3/3

    3.3.3 动态控件的创建 82 3.4 Page类 84 3.4.1 Session、Application和Cache 84 3.4.2 Request 85 3.4.3 Response 86 3.4.4 Server 88 3.4.5 User 90 3.4.6 Trace 91 3.4.7 访问其他类中的HTTP上...

    ASP多文件上传

    ASP多文件上传 通常图片的上传,不是一张两张的,我们需要批量的上传 ...1.可以添加、删除file表单控件 2.上传时验证有效性 3.做文件格式判断 4.服务端重新命名并保存上传的多个文件 5.限制一次最大上传的文件个数

    FreeTextBox源码

    FreeTextBox是一款免费的Asp.net网页编辑器,官方默认为英文版,该版本设置为简体中文版,可以设置文字样式、在线排版、图片上传等(FreeTextBox源码需要单独购买... 也可以把控件添加到工具栏,通过直接拖拽来使用控件

Global site tag (gtag.js) - Google Analytics