Html中file实现多文件上传
今天遇到一个问题要用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); } } }
实现效果如图:
windows技术爱好者