<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>
分享到：
相关推荐
在“单file控件批量上传文件”的实现过程中，JavaScript负责前端的文件选取、预览、进度显示等功能。它会遍历用户选择的每个文件，创建FormData对象，将文件添加到FormData中，然后通过XMLHttpRequest或fetch API...
标题中的“单击按钮就添加的控件”指的是在网页设计中，通过点击一个按钮来动态添加新的用户界面元素，例如文本框、下拉菜单或其他交互控件。这种功能常见于许多网页应用，如在线表单、聊天室或任务管理器，允许用户...
"jquery封装的input file控件"是一种解决方法，通过jQuery库来改进文件上传控件的外观和交互体验。 jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画效果和Ajax交互等任务。在本案例中，开发者...
对于动态添加文件输入控件的场景，`addFile()` 函数展示了如何在页面上动态创建一个包含文件输入、文本输入和删除按钮的表格。这个函数首先获取表单中计数器字段的值，然后在指定位置插入HTML字符串，这个字符串定义...
HTML5中的File控件是现代Web开发中一个重要的特性，它极大地增强了用户在网页上处理文件的能力。在HTML4时代，用户只能通过单个文件选择输入框（`<input type="file">`）来选择一个文件进行上传，而HTML5引入了对多...
"easyUpload.js图片(视频)上传控件"是一个针对这一需求的JavaScript解决方案，它为H5（HTML5）环境提供了便捷的文件上传功能。下面将详细阐述这个控件的工作原理、特点以及如何使用。 1. **工作原理**： ...
接下来，我们使用JavaScript来实现动态添加和删除文件上传控件的功能。这里主要用到了以下几个关键方法： - `getElementById()`: 用来获取页面中的某个元素。 - `insertAdjacentHTML()`: 用于向目标元素的指定位置...
在网页设计中，上传控件`<input type="file">`是必不可少的元素，它允许用户选择本地文件并上传到服务器。然而，由于浏览器的安全限制，这个控件的默认样式通常非常简陋，无法直接通过CSS进行大幅度的美化。本教程将...
然后，通过JavaScript获取这个元素，并添加事件监听器，监听change事件，当用户选择文件后触发： ```javascript document.getElementById('uploadFiles').addEventListener('change', handleFileSelect, false); ``...
### 隐藏File元素的方法与实践 #### 一、引言 在Web开发过程中，文件上传功能...总之，通过隐藏`<input type="file">`元素并使用其他控件触发文件选择的方式，可以在不影响用户体验的前提下提升网站的美观性和功能性。
总结来说，当file控件选择上传文件确定后，主要触发的js事件是onchange。在现代Web开发中，我们建议开发者优先使用onchange事件来处理file控件的用户操作。而对于onpropertychange事件，由于其在多数现代浏览器中的...
**Angular-File-Upload上传控件详解** 在Web开发中，文件上传功能是常见的需求，尤其是在用户交互丰富的应用中。Angular-File-Upload是一个专为AngularJS设计的轻量级、易于使用的上传组件，它提供了丰富的特性来...
在ASP.NET开发中，动态引用和添加JS及CSS文件是一项常用且重要的技能，尤其是在需要根据运行时条件加载不同样式或脚本的情况下。本文将详细解析如何在ASP.NET后台代码中实现这一功能，确保网页能够根据实际需求灵活...
- `<input type="file" id="f" ...>`：这是实际的文件输入控件，通过设置`style="position:absolute;filter:alpha(opacity=0);"`使其不可见。 2. **自定义按钮**： - `<input type="button" ...>`：这是一个...
6. 页面结构控制：示例展示了如何通过编程的方式控制HTML表格的内容，通过在JavaScript中创建新的table行(tr)和单元格(td)，并添加表单控件(input)，最终实现用户界面的动态更新。 7. 标签及属性命名：在编写HTML和...
PDF在线浏览js控件是一种基于JavaScript技术实现的插件，主要功能是使用户能够在网页上直接查看PDF文档，而无需下载或安装额外的软件。这种技术对于提升网站用户体验，特别是那些需要频繁展示PDF内容的网站来说，是...
1. **添加控件**: 首先，你需要在你的MFC工程的对话框资源中添加一个新的控件，并将其类型设置为自定义控件。然后，将控件的ClassID设置为`CHtmlCtrl`的类名。 2. **编写代码**: 在对应的对话框类中，为该控件添加...
在HTML代码中，可以看到一个动态添加File输入框的功能，通过JavaScript的`addFile()`和`resetFile()`函数实现。用户可以通过点击“增加”按钮添加更多文件选择框，点击“重置”按钮则清除所有已选文件。 HTML代码...
为了实现自定义的file标签，我们需要利用HTML、CSS以及JavaScript（可能还需要一些库或框架如jQuery）来改造这个基本控件，以达到与网站整体风格一致的效果。 首先，我们需要创建一个HTML结构，用自定义的按钮或者...
这段JavaScript代码通过修改`outerHTML`属性来清空FileUpload控件中的文件。当用户上传了错误类型的文件时，我们可以调用这个函数来清空控件的内容。 #### 四、文件类型检查 为了确保用户只能上传特定类型的文件，...