C#中使用iframe結合js實現圖片異步上傳

C#中使用iframe結合js實現圖片異步上傳

將圖片上傳的頁面放在iframe中，通過iframe跳轉到另一個頁面，在該頁中將圖片提交到服務器，而不需要對主頁進行刷新，提交成功後用腳本（回調函數）實現上傳的圖片在主頁面的顯示。

圖片選擇頁面 Add.aspx

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




    

    <script type="text/javascript">
//圖片異步上傳
function doUpload() {
	var theFrame = document.getElementById("uploadframe");
	if (theFrame) {
		theFrame = theFrame.contentWindow;
		theFrame.selectAndUpload();
	}
}

function callback(str) {

	var theImg = document.getElementById("imgResult");
	document.getElementById("picUrl").value = str;
	str = "../images/" + str;
	theImg.setAttribute("src", str);
}
    </script>



    

前台 PicUpload.aspx

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





    
    
     <script type="text/javascript">
        function selectAndUpload() {
            var theFileUpload = document.getElementById("<%=pic_upload.ClientID%>");
            theFileUpload.onchange = function () {
                var fileExt = theFileUpload.value.substr(theFileUpload.value.lastIndexOf("."));
                
                //判斷文件打大小
                if(theFileUpload.files[0].size>8192000)
                {
                     top.alert("文件大小超出8M！請重新選擇！");
                }
                else
                {        //驗證是不是圖片         
                        if (!fileExt.match(/\.jpg|\.png|\.bmp|\.gif/i)) 
                        {
                            top.alert("只能上傳jpg,gif,bmp,png圖片!");
                        }
                        else {
                            var myForm = document.getElementById("<%=form1.ClientID%>");
                            myForm.submit();
                        }
                  }
            }
            theFileUpload.click();
        }
        //回調函數
        function callback(filePath) 
        {
             parent.callback(filePath);
             //也可用top.callback,But，若Add.aspx是其他頁面通過iframe 跳轉到的（如在index.aspx 通過<iframe src="Add.aspx"></iframe> 跳轉到Add.aspx）,
             //則top.callback無法回調到Add.aspx,而parent.callback可以回調到Add.aspx
        }  
</script> 


    

PicUpload.aspx.cs:

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.IO;
using System.Security.Cryptography;

namespace Web.Print
{
    public partial class PicUpload : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack && pic_upload.HasFile)
            {
               
                //取得文件的擴展名,並轉換成小寫
                string fileExtension = Path.GetExtension(pic_upload.FileName).ToLower();

                string filepath = "/images/";
                if (Directory.Exists(Server.MapPath(filepath)) == false)//如果不存在就創建file文件夾
                {
                    Directory.CreateDirectory(Server.MapPath(filepath));
                }
                string hash = CreatePasswordHash(pic_upload.FileName, 4);

                string virpath = filepath + hash + fileExtension;//這是存到服務器上的虛擬路徑
                string mappath = Server.MapPath(virpath);//轉換成服務器上的物理路徑

                pic_upload.SaveAs(mappath);               
                              
               
                ScriptManager.RegisterStartupScript(this, this.GetType(), "callback", "callback('" + hash + fileExtension + "');", true);
            }
        }
              

        /// 

        /// 創建一個指定長度的隨機salt值
        /// 
        public string CreateSalt(int saltLenght)
        {
            //生成一個加密的隨機數
            RNGCryptoServiceProvider rng = new RNGCryptoServiceProvider();
            byte[] buff = new byte[saltLenght];
            rng.GetBytes(buff);
            //返回一個Base64隨機數的字符串
            return Convert.ToBase64String(buff);
        }


        /// 

        /// 返回加密後的字符串
        /// 
        public string CreatePasswordHash(string pwd, int saltLenght)
        {
            string strSalt = CreateSalt(saltLenght);
            //把密碼和Salt連起來
            string saltAndPwd = String.Concat(pwd, strSalt);
            //對密碼進行哈希
            string hashenPwd = FormsAuthentication.HashPasswordForStoringInConfigFile(saltAndPwd, "sha1");
            //轉為小寫字符並截取前16個字符串
            hashenPwd = hashenPwd.ToLower().Substring(0, 16);
            //返回哈希後的值
            return hashenPwd;
        }
    }
}