今天遇到一个问题要用file实现多文件上传，实现效果需要把file控件用span或则div来遮盖
实现效果如图：
实现的代码如下：
<div id="uploadImg" class="uploadImg">
<input type="file" id="file1" name="file1" size="1" class="file" />
<a href="#">上传文件</a>
</div>
当然到这里只是实现了单文件上传，有关样式的设置请看File input 的样式和文字的更改方法__适用于Firefox、IE等浏览器
需要我们用js来动态创建file控件。由于file控件的特殊性，它不能通过clone来创建（ie下不可以，ff下可以）。还有一点就是新建的file控件必须放到div里面第一个元素。
具体的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Upload</title>
<style type="text/css">
.uploadImg
{
font-size: 12px;
overflow: hidden;
position: absolute;
}
.file
{
position: absolute;
z-index: 100;
margin-left: -180px;
font-size: 60px;
opacity: 0;
filter: alpha(opacity=0);
margin-top: -5px;
}
li div
{
display: inline;
}
</style>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server" enctype="multipart/form-data" method="POST">
<div id="uploadImg" class="uploadImg">
<input type="file" id="file1" name="file1" size="1" class="file" />
<a href="#">上传文件</a>
</div>
<div style="display: block; position: absolute">
<p>
已选则文件:</p>
<ul id="upfiles">
</ul>
<br />
<asp:Button ID="btnUpload" runat="server" Text="Submit" OnClick="btnUpload_Click" />
</div>
<script type="text/javascript">
$(function () {
(function (i) {
$(".uploadImg").click(
function () {
$(".uploadImg .file").first().change(function () {
i = i + 1;
var html = ' <input type="file" size="1" id="file' + i + '" name="file' + i + '" class="file" />';
var oldelem = $("#file" + (i - 1));
$(html).insertBefore(oldelem);
$(".uploadImg").append(oldelem.hide());
var uphtml = $(' <li><div>' + $(this).val() + '</div><div class="del" data="' + $(this).attr("id") + '">删除</div></li>');
$("#upfiles").append(uphtml);
});
});
})(1);
$(".del").live("click", function () {
var id = $(this).attr("data");
$("#" + id).remove();
$(this).parent("li").remove();
});
});
</script>
<br />
<br />
</form>
</body>
</html>
protected void btnUpload_Click(object sender, EventArgs e)
{
string path= Server.MapPath("uploads");
foreach (string key in Request.Files)
{
HttpPostedFile file = Request.Files[key];
if (file != null && file.ContentLength > 0)
{
file.SaveAs(Path.Combine(path,file.FileName));
Response.Write(file.FileName);
}
}
}
实现效果如图：
