js控制FileUpload上传控件把上传的文件添加到指定的div中

最新推荐文章于 2022-12-14 15:08:09 发布

转载最新推荐文章于 2022-12-14 15:08:09 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ZSCFang/archive/2011/05/17/2048915.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用ASP.NET实现的文件上传功能，并通过JavaScript进行客户端文件列表的动态展示及删除操作。用户可以将文件添加到列表并进行管理。

<head runat="server">
<title>无标题页</title>
<script type="text/javascript">
function fileAdd()
{
var file_appendixs = document.getElementById("file_appendix").value;
var arrfile = new Array();
arrfile = file_appendixs.split("\\");
var A ="";
for(var i=0;i<arrfile.length;i++)
{
A = arrfile[i];
}
var fillist = A+"<input id='cb_del' name='cb_del' type='checkbox' value='" + A + "' />；  "
//fillist+="<input id='but_delete' name='but_delete' type='button' value='删除选中'>";
//document.write(fillist);
var div = document.getElementById("file");
div.innerHTML+=fillist;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:FileUpload ID="file_appendix" runat="server" Width="250px" />
<input type="button" value="添加" runat="server" onclick="fileAdd()" /><br />
<div id="file">

</div>
<div>
<input type="button" value="删除选中" id="but_delete" onclick="fileDelete()" />
</div>
<br />
</div>
</form>
</body>

运行效果是：