iframe批量异步上传图片

(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>

(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上传的图片。