在遇到需要添加附件或者上传文件时,附件的数量可能不定的,所以附件浏览框需要动态生成,我遇到了这个问题,但在网上没有找到好用的代码,于是自己写了一段,拿来共享:
<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>
分享到：
相关推荐
### JavaScript 实现 Element UI 中 Input 组件部分功能 #### 一、概述 本文档主要介绍如何使用纯 JavaScript 来实现 Element UI 中 Input 组件的部分功能，并将其封装为一个可复用的组件。Element UI 是一套为...
在“点击添加input可删除.zip”这个压缩包中，可能包含了实现这一功能的完整HTML、CSS和JavaScript文件。解压并查看这些文件，你可以看到实际的代码实现，从而更好地理解和学习这个功能的开发过程。通过实践，你可以...
在前端开发中，Layui是一个非常流行的JavaScript框架，它提供了丰富的UI组件和便捷的API，使得开发者可以快速构建美观且功能完善的Web应用。本文将详细介绍如何使用Layui实现input框添加tag功能。 首先，我们需要...
动态添加控件的基本思路是通过JavaScript的DOM（Document Object Model）接口来操作HTML文档结构。DOM是一个编程接口，用于HTML和XML文档，它将文档表示为树形结构，每个节点代表文档的一部分，如元素、属性或文本。...
6. **错误提示**：当输入不符合要求时，JavaScript可以动态添加错误提示，并对输入框进行高亮，帮助用户快速识别并修正错误。 7. **输入验证**：在用户提交表单前，JavaScript可以进行客户端验证，提高用户体验，...
### input框添加图片按钮 #### 知识点概述 在网页设计中，为了优化用户体验及提升界面美观度，经常会...通过合理运用CSS和JavaScript技术，我们可以轻松创建出既美观又实用的用户界面组件。希望本文能对你有所帮助！
JavaScript实现的日历组件是一种常见的网页交互元素，常用于让用户方便地选择日期，尤其在填写表单时。这个组件是纯HTML脚本编写的，这意味着它不依赖任何外部库或框架，如jQuery或AngularJS，因此它具有轻量级、...
本文将详细讲解如何使用JavaScript实现动态添加输入框，以及结合时间选择组件来增强用户体验。 首先，我们需要了解JavaScript的基础知识。JavaScript是一种广泛应用于网页开发的脚本语言，它可以在客户端运行，对...
在JavaScript（JS）开发中，有时我们需要实现一些高级交互效果，比如模仿知名应用的功能，例如支付宝的input文本输入框放大组件。这个组件在用户聚焦到输入框时，会将输入框放大，提供更好的用户体验，特别是在...
当input获取焦点时，我们通过JavaScript将`.input-active`类添加到该元素；失去焦点时，移除这个类。这可以通过以下代码实现： ```javascript // 获取所有的input元素 var inputs = document.querySelectorAll('...
JavaScript（js）作为客户端脚本语言，使得我们能够实现表格的动态交互功能，如动态添加行、行编辑以及行数据修改。下面我们将深入探讨这些知识点。 ### 1. 动态添加行 在HTML中，`<table>`元素用于创建表格，但...
`，然后通过JavaScript添加或移除这个类： ```javascript var inputBox = document.getElementById('inputId'); inputBox.classList.toggle('hidden'); ``` 在实际应用中，可能还需要考虑浏览器兼容性问题，确保...
在JavaScript和Vue.js开发中，有时我们需要实现一种功能，即当页面加载或特定事件发生时，使输入框（input）自动获取焦点。这样的需求在创建表单或评论系统时尤其常见，用户可以直接开始输入而无需手动点击输入框。...
在微信小程序中，动态控制Input组件的disabled状态是一项常见的需求，尤其在实现用户信息编辑与保存功能时。本文将详细讲解如何实现这一功能，并解决在实际开发中可能遇到的“disabled属性不生效”的问题。 首先，...
`js+input`日历控件是利用JavaScript语言和HTML中的`<input>`元素来实现的一种交互式日期选择组件。这个控件通常与HTML5的`<input type="date">`标签结合，但也可以通过自定义JavaScript代码实现更丰富的功能和样式...
【JavaScript实现一个输入框组件】 在前端开发中，有时我们需要自定义特定样式的组件来满足设计需求。在Taro H5环境中，由于Taro组件库和Taro-ui库并未提供某些特定样式的组件，比如一个特定样式的输入框，这时就...
本文将深入探讨一个轻量、无依赖的JavaScript验证组件，它能帮助开发者轻松实现表单验证，提高用户体验。 这个名为"validator.js"的组件专注于提供简洁、高效的验证功能，无需额外引入其他库或框架。这意味着开发者...
4. **Bootstrap集成**：Bootstrap是流行的前端开发框架，提供了一套美观、响应式的CSS和JavaScript组件。将jQuery插件与Bootstrap结合，可以轻松地创建专业且易于使用的用户界面。例如，分组列表可能采用Bootstrap的...
Antd Input Tag组件的核心功能是将用户的连续输入截断成单独的标签，通常每个标签由用户输入的关键词或短语组成，并且可以通过点击或键盘操作进行添加、删除和编辑。这个组件在React应用中可以提高用户体验，因为它...
JavaScript日历组件是一种常见的网页交互元素，用于在Web页面上显示日期选择器，方便用户进行日期输入或选择。这类组件通常包含多种功能，如月份切换、周选择、日期范围选择等，且支持自定义样式和多语言配置，以...