Asp.net 图片异步上传的简单实现

应用：

类似新浪微博传图片那个东西，不刷新页面上传图片。当然，扩展下是可以实现图片拼接神马的功能，不需要用到Flash的。

思路：

网页default.aspx和上传页面picupload.aspx，在default.aspx中内置iframe嵌入picupload.aspx，通过default的js调用picupload中的FileUpload实现上传，picupload上传成功后回调主页面default的回调函数，提示上传结果。

具体实现：

一、Default.aspx

  

    <script type="text/javascript">  
        function doUpload() {  
            var theFrame = document.getElementById("uploadframe");  
            if (theFrame) {  
                theFrametheFrame = theFrame.contentWindow;  
                theFrametheFrame.selectAndUpload();  
            }  
        }  

        function callback(str) {  
            var theImg = document.getElementById("imgResult");  
            theImg.setAttribute("src", str);  
            alert("上传完成！");  
        }  
</script>

  
<form id="form1" runat="server">
<div>
<h1>
            Asp.net 异步上传示例</h1>

        <iframe src="PicUpload.aspx" id="uploadframe" style="display: none;"></iframe>  
<input type="button" id="btnBrowser" value="选择文件" onclick="doUpload()">
<h2>
            上传结果</h2>


            <img alt="上传后的图片" id="imgResult" style=" 400px">
        
</div>
</form>

二、PicUpload.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PicUpload.aspx.cs" Inherits="PicUpload" %>



    <title></title>
    <script type="text/javascript">  
        function selectAndUpload() {  
            var theFileUpload = document.getElementById("<%=fileUpload1.ClientID%>");  
            theFileUpload.onchange = function () {  
                var fileExt = theFileUpload.value.substr(theFileUpload.value.lastIndexOf("."));  
                if (!fileExt.match(/\.jpg|\.png|\.gif/i))//验证一下是不是图片  
                {  
                    top.alert("只能上传jpg,png,gif图片。");  
                }  
                else {  
                    var myForm = document.getElementById("<%=form1.ClientID%>");  
                    myForm.submit();  
                }  
            }  
            theFileUpload.click();  
        }  

        function callback(filePath) {  
            top.callback(filePath);  
        }  
</script>

  
<form id="form1" runat="server">
<div>
        <asp:fileupload runat="server" id="fileUpload1"></asp:fileupload>
    </div>
</form>

Code Behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;  

public partial class PicUpload : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack && fileUpload1.HasFile)
        {
            fileUpload1.SaveAs(System.IO.Path.Combine(MapPath("~"), fileUpload1.FileName));
            ClientScript.RegisterClientScriptBlock(this.GetType(), "callback", "callback('" + fileUpload1.FileName + "')", true);
        }
    }
}