iframe无刷新异步上传
前台页面 代码
代码
1 <form id="form1" runat="server" enctype="multipart/form-data">
2 <asp:HiddenField ID="hf" runat="server" />
3 <!--隐藏的iframe来接受表单提交的信息-->
4 <iframe name="hd" style="display: none;"></iframe>
5 <div id="screenshot" style="display: block; background-color: #FFFF99; position: absolute;
6 width: 350px; left: 8px; bottom: 137px; border: 1px; border-color: Gray; border-style: solid;
7 z-index: 1;">
8 <input type="file" id="file1" name="upfile" size="28" />
9 <input type="button" value="发 送" onclick="return SendFile('company/2/','file1','u','mag')" />
10 <input type="button" value="删 除 " onclick="return SendFile('company/2/','','d','mag')" />
11 </div>
12 <asp:Image ID="mag" runat="server" Width="200" Height="250" ImageUrl="~/Image/fbz.jpg" />
13 <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" OnClientClick="return rea()" />
14 </form>
15
16
js代码
<script src="jquery-1.3.2.js" type="text/javascript"></script>
代码
1 <script type="text/javascript" language="javascript">
2 //检查是否选择文件
3 function UpdateMsddg(newfilename, filename, ImageName) {
4 //此函数用来提供给提交到的页面如upload.ashx输出js的回调，更新当前页面的信息
5 if (newfilename == "") {
6 $("[id$='" + ImageName + "']").get(0).src = "/Image/fbz.jpg";
7 } else {
8 ///清空file值
9 // var file = $("#file1");
10 // file.after(file.clone().val(""));
11 // file.remove();
12 //现实图片
13 $("[id$='" + ImageName + "']").get(0).src = filename + newfilename;
14 //将上传的图片值存到hf隐藏域中
15 if ($("#hf").val() == "") {
16 $("#hf").val(newfilename);
17 } else {
18 $("#hf").val($("#hf").val() + "-" + newfilename);
19 }
20 }
21
22 }
23 //发送文件，手动提交表单
24 //url是上传地址 upload是上传的file控件Id,funType操作类型,imageName上传图片Id
25 function SendFile(url, upload, funType, imageName) {
26 //点击上传按钮时（先验证了图片格式）
27 if (funType == 'u') {
28 if (checkData(upload)) {
29 if ($("#inp") == null) {
30 $("#form1").append("<input id='inp' type='text'/>");
31 $("#inp").val($("[id$='" + upload + "']").val())
32 } else {
33 if ($("#inp").val() == $($("[id$='" + upload + "']").val())) {
34 alert("");
35 }
36 }
37 $("#form1").attr("action", "upload.ashx?UploadFile=" + url + "&ImageName=" + imageName + "&uploadId=" + upload);
38 $("#form1").attr("target", "hd");
39 $("#form1").submit();
40 }
41 } else if (funType == 'd') {
42 //点击删除按钮时
43 $("#form1").attr("action", "upload.ashx?del=" + url + $("[id$=" + imageName + "]").get(0).src.substring($("[id$=" + imageName + "]").get(0).src.lastIndexOf('/') + 1) + "&ImageName=" + imageName);
44 $("#form1").attr("target", "hd");
45 $("#form1").submit();
46 }
47 }
48 ///验证上传的图片
49 function checkData(upload) {
50 var result = true;
51 var fileName = $("[Id$=" + upload + "]").val(); //获得上传控件对象值
52 if (fileName == "") {
53 alert("请上传照片");
54 return false;
55 }
56 var exName = fileName.substr(fileName.lastIndexOf(".") + 1).toUpperCase();
57 if (exName != "JPG" && exName != "BMP" && exName != "GIF" && exName != "JPEG" && exName != "PNG") {
58 alert("只能上传jpg,bmp,gif,jpeg,png格式的图片");
59 result = false;
60 }
61
62 return result;
63
64 }
65
66 //from重定向
67 function rea() {
68 $("#form1").attr("action", location.href);
69 $("#form1").removeAttr("target");
70 if ($("#form1").attr("target") == null || $("#form1").attr("target") == "") {
71 return true;
72 }
73 else {
74 return false;
75 }
76 }
77 </script>
78
79
80
一般处理程序
代码
1 public void ProcessRequest(HttpContext context)
2 {
3 HttpRequest Request = context.Request;
4 HttpResponse Response = context.Response;
5 HttpServerUtility Server = context.Server;
6 //指定输出头和编码
7 Response.ContentType = "text/html";
8 Response.Charset = "gb2313";
9 HttpPostedFile f = Request.Files["upfile"];
10 //获取上传的文件
11 string oldfile = f.FileName.Substring(f.FileName.LastIndexOf("\\") + 1);
12 if (Request.QueryString["del"] != null)
13 {
14 if (File.Exists(Server.MapPath(Request.QueryString["del"])))
15 {
16 File.Delete(Server.MapPath(Request.QueryString["del"]));
17 Response.Write("<script>parent.UpdateMsddg('','','" + Request.QueryString["ImageName"] + "')</script>");
18 }
19 }
20 else
21 {
22 string newFileName = DateTime.Now.ToString("yyyyMMddHHmmss") + oldfile.Substring(oldfile.LastIndexOf('.'));
23 string sql = Request.QueryString["UploadFile"];
24 if (!Directory.Exists(Server.MapPath(sql)))
25 {
26 Directory.CreateDirectory(Server.MapPath(sql));
27 }
28 f.SaveAs(Server.MapPath(sql + newFileName));
29 //如果要保存到其他地方，注意修改这里
30 //调用父过程更新内容，注意要对des变量进行js转义替换，繁殖字符串不闭合提示错误
31 context.Response.Write("<script>window.parent.UpdateMsddg('" + newFileName + "','" + sql + "','" + Request.QueryString["ImageName"] + "')</script>");
32 }
33
34
35 }
36
37
只是简单的iframe无刷新，这是我第一次写东西，请多多指教， 谢谢
