无刷上传已不是什么新鲜事了,今天主要记录一下通过iframe无刷上传。随便总结一下网页上传。
1)直接网页里面加file控件然后网页回发上传。
2)无刷上传主要通过iframe实现及现在html5标准中出台FileReader及XmlHttpRequest中的一些新方法上传。
3)插件类上传(activex、flash、silverlight 等)。
无刷上传网上已经有很多很完善的了,今天主要以最简单的方式记录一下。
iframe上传脚本。
<script type="text/javascript"> function sendFile() { $("#form1").attr("encoding", "multipart/form-data"); $("#form1").attr("action", "AjaxServer/upload.ashx"); $("#form1").attr("target", "hd"); $("#form1").submit(); } function showMessage(msg) { alert(msg); } //from重定向 function redirect() { $("#form1").attr("action", location.href); $("#form1").removeAttr("target"); $("#form1").attr("encoding", "application/x-www-form-urlencoded"); if ($("#form1").attr("target") == null || $("#form1").attr("target") == "") { return true; } else { return false; } } </script>
asp.net页面
<form id="form1" runat="server"> <iframe id="hd" name="hd" src="about:blank"></iframe> <div id="screenshot" style="display: block; background-color: #FFFF99; position: absolute; 350px; left: 8px; bottom: 137px; border: 1px; border-color: Gray; border-style: solid; z-index: 1;"> <input type="file" id="file1" name="upfile" size="28" /> <input type="button" value="发 送" onclick="sendFile()" /> </div> <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" OnClientClick="return redirect()" /> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> </form>
upload.ashx
context.Response.ContentType = "text/html"; string path; if (context.Request.Files.Count > 0 && context.Request.Files[0].FileName != "") { HttpPostedFile hpf = context.Request.Files[0]; if (hpf.FileName.Contains("\\")) path = context.Server.MapPath("../Upload/" + hpf.FileName.Substring(hpf.FileName.LastIndexOf("\\"))); else path = context.Server.MapPath("../Upload/" + hpf.FileName); hpf.SaveAs(path); context.Response.Write("<script type=\"text/javascript\">parent.showMessage('上传成功');</script>"); } else { context.Response.Write("<script type=\"text/javascript\">parent.showMessage('未获取到文件');</script>"); }