1,
(1)在WebForm3.aspx定义一个iframe,隐藏
(2)指定form的action指向处理图片页面,target指向iframe(一定要写它的name,而不是id)
(3)当file的change时提交表单
下面是WebForm3.aspx的页面:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication1.TestPage.WebForm3" %> <!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 runat="server"> <title></title> <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript"> //子页面iframe调用，拼接图片，加到本页面 function UpImg(imgUrl) { var img = "<img src=" + imgUrl + "/>"; $("#form1").append($(img)); } $(function () { //让按钮触发file的click,隐藏file $("#roombtn").click(function () { $("#roomfile").click(); }); $("#roomfile").change(function () { $("#form1")[0].submit(); }); }); </script> </head> <body> <iframe name="iframe1" style="display:none" ></iframe> <form id="form1" runat="server" action="PicUpload.aspx" target="iframe1" > <input id="roombtn" type="button" class="sub" value="上传图片" /> <input id="roomfile" runat="server" type="file" multiple="multiple" style="display:none" /> </form> </body> </html>
2,
(1)在页面PicUpload的后台Page_Load方法中处理图片，并且将图片url以js变量的形式输出到PicUpload
页面。
(2)PicUpload页面的onload中指定处理图片的函数
在函数中调用父页面WebForm3.aspx的js方法，将图片添加到WebForm3.aspx页面
下面是PicUpload后台处理方法:
public partial class PicUpload : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { HttpFileCollection files = HttpContext.Current.Request.Files; StringBuilder builder = new StringBuilder(); builder.Append("var imgUrl='");//定义一个js变量 for (int i = 0; i < files.Count; i++) { HttpPostedFile file = files[i]; string fileName = Guid.NewGuid().ToString().Replace("-", "") + ".jpg"; string filePath = "/"; file.SaveAs(System.IO.Path.Combine(MapPath(filePath), fileName)); builder.Append(filePath + fileName);//图片的相对路径 builder.Append(",");//多张图分隔符号 } builder.Length -= 1;//去除最后一个逗号 builder.Append("'"); this.Literal1.Text = builder.ToString();//赋值给前台的Literal1 } }
下面是页面：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PicUpload.aspx.cs" Inherits="WebApplication1.TestPage.PicUpload" enableEventValidation="false" enableViewStateMac="false" %> <!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 runat="server"> <title></title> <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> <asp:Literal ID="Literal1" runat="server" EnableViewState="false"></asp:Literal> </script> <script type="text/javascript"> //这个函数在onload时执行，在它执行之前，Page_Load已经处理好图片 function UpImg() { var imgs = new Array(); //定义一数组 imgs = imgUrl.split(","); //字符分割 imgUrl是后台输出到 Literal1上的js变量 for (i = 0; i < imgs.length; i++) { self.parent.UpImg(imgs[i]);//调用父页面的函数 } } </script> </head> <body onload="UpImg()" > <form id="form1" runat="server"> <div> </div> </form> </body> </html>
注意：
1,PicUpload页面<%@ Page%>中要加enableEventValidation="false" enableViewStateMac="false"
因为是从WebForm3.aspx向其他页面传递图片，而且WebForm3.aspx的form中要加runat,
否则取不到图片。
2,如果WebForm3.aspx中放多个file,都可以放在这一个form中，提交到后台可以通过Request.Files的
Keys判断出是哪个file上传的图片。