增加、删除文件上传控件

最新推荐文章于 2025-05-02 16:18:30 发布

原创最新推荐文章于 2025-05-02 16:18:30 发布 · 902 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #file #input #class #button #function

javascript 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个简单的文件上传组件实现方式，通过JavaScript动态生成多个文件输入框，并提供了删除按钮。此组件支持实时预览文件路径。

<script type="text/javascript">
var inputCount=1;
function add()
{
	var html="<input name=file"+inputCount+" id=file"+inputCount+" size=50% type=file onChange=\"if(this.value){insertTitle(this.value,"+inputCount+")}\"><input type=button style=\"cursor: hand\" class=\"shanchu\" onmousemove=\"this.className='shanchua'\" onmouseout=\"this.className='shanchu'\" value=\"\" onclick=\"remove(this)\">";
	var o=document.all["files"];
	var div=document.createElement("div");
	div.innerHTML=html;
	o.appendChild(div);
	inputCount++;
}
  </script>

<tr>
	<td align="right">
	<A class="lin4" onclick="add();" href="#">添加附件</A>
	</td>
	<td align="left" colspan="3">
	<div id="files"></div>
	<script type="text/javascript">add();</script>
	</td>
</tr>