多文件無刷新上傳（一）

本代碼實現圖片文件上傳並生成縮略圖以及文件安全效驗等。

多文件上傳效果只兼容  IE10、firefox、chrome 等瀏覽器，其他瀏覽器只能單文件上傳。

 

事件：

   開發代碼中一般使用傳統的FileUpload控件進行單個文件上傳，選擇圖片文件時又無法達到實時預覽的效果，而且無法實施對多件文件一次性上傳。

   實現圖片預覽在第二篇中詳細描述，請關注。

 

代碼架構圖：

--- AjaxUploadFileContral      ---- cs            ----ajax.aspx //ajax頁面            ----Encryption.cs   //加解密操作基類            ----JSONHelper.cs   //json操作基類            ----Result.cs   //保存對象類            ----UploadFileClass.cs   //文件上傳操作基類       ---- css            ----css.css       ---- img  //資源圖片       ---- js            ----jquery-1.4.2.min.js            ----uploadfile.js  //文件上傳js類      --- temp  //圖片臨時文件夾      --- ajaxUF.ascx //文件上傳控件      --- UploadFile.aspx //文件接收頁面 ---- Image //站點圖片文件夾 ---- Default.aspx  //主頁面，測試 ---- Web.config

 

初步效果圖（火狐下）：

 

實施邏輯：

   1、主界面使用框架嵌套文件接收頁面，通過File控件選擇多個文件后，將文件Post提交至文件接收頁面。

   2、接收頁面將傳入的文件圖片保存至站點臨時目錄，保存完成后讀取臨時目錄中的圖片進行預覽以及保存（預覽圖片為縮略圖）。

   3、刪除操作：將選中的圖片及縮略圖從臨時目錄中刪除。

   4、保存：將選中的圖片及縮略圖全部移動到站點指定圖片目錄。

   5、取消上傳：刪除臨時目錄里的所有文件。

 

說明：

    第2步驟中需同時生成圖片縮略圖以及效驗文件安全。

 

 

主要代碼模塊：

     文件效驗模塊

    /// <summary>
    /// 效驗文件安全性
    /// 將效驗文件正確格式，即使更改文件類型及擴展名也無法通過此效驗方法
    /// </summary>
    public static Result checkFile(string FilePath)
    {
        try
        {
            FileStream fs = new FileStream(FilePath, FileMode.Open, FileAccess.Read);
            BinaryReader r = new BinaryReader(fs);
            string fileclass = "";
            byte buffer = r.ReadByte();
            fileclass = buffer.ToString();
            buffer = r.ReadByte();
            fileclass += buffer.ToString();
            r.Close();
            fs.Close();

            //文件類型錯誤，將刪除文件
             bool falg = false;
             string[] FileType = new string[] { "255216", "7173", "13780" };
            //數字說明，只針對目前主流圖片格式：
            //255216  代表 .jpg文件
            //13780  代表 .png文件
            //7173  代表 .gif文件
            foreach (string n in FileType)
            {
                if (fileclass == n)
                {
                    falg = true;
                    break;
                }
            }
            if (!falg)
            {
                File.Delete(FilePath);
                return new Result(-1,"上傳文件為非法文件，請謹慎上傳。");
            }
            return new Result(1,"true");
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

 

---

    圖片縮略圖生成模塊

    /// <summary>
    /// 生成圖片縮略圖
    /// </summary>
    /// <param name="filePath">圖片地址</param>
    /// <param name="newFileName">縮略圖地址</param>
    public static string CreateThumbnailImage(string filePath, string newFileName)
    {
        try
        {
            if (File.Exists(filePath))
            {
                System.Drawing.Image copyImage = System.Drawing.Image.FromFile(filePath);
                //為寫入縮略圖委托事件
                System.Drawing.Image.GetThumbnailImageAbort callb = new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback);
                System.Drawing.Image ReducedImage = copyImage.GetThumbnailImage(ThumbnailImgWidth, ThumbnailImgHeigth, callb, IntPtr.Zero); //獲取縮略圖
                //保存縮略圖
                ReducedImage.Save(newFileName, System.Drawing.Imaging.ImageFormat.Jpeg);
                ReducedImage.Dispose();
                copyImage.Dispose();
                return newFileName;
            }
        }
        catch (Exception ex)
        {
            throw ex;
        }
        return string.Empty;
    }

    /// <summary>
    /// 構造方法 為委托事件寫入縮略圖
    /// </summary>
    public static bool ThumbnailCallback()
    {
        return false;
    } 

 

---

   獲取頁面post傳遞的文件，保存至臨時目錄

    /// <summary>
    /// 獲取post的文件方法，將圖片文件保存至臨時文件夾，並生成縮略圖
    /// </summary>
    /// <param name="req"></param>
    public static void UploadImgToTempAndCreataThumbnailImage(HttpRequest req)
    {
        try
        {
             int filesCount = req.Files.Count; //獲取請求流里的文件個數
             if (filesCount > 0)
             {
                bool falg = true;
                for (int i = 1; i <= filesCount; i++)
                {
                    string fileName = req.Files[i - 1].FileName; //文件名稱
                    //在此只做普通擴展名過濾，請在程序后台代碼中詳細過濾
                    if (fileName.IndexOf(".exe") > -1)
                        falg = false;
                    if (falg)
                    {
                        //獲取圖片需暫存的臨時目錄
                        string url = UploadFileClass.getTmpRootUrlMapPath() + fileName;
                        lock (url)                        
                        {
                            //先刪除緩存圖片
                            File.Delete(url);

                            //將文件存入臨時目錄
                            req.Files[i - 1].SaveAs(url);

                            //效驗文件以及產生縮略圖 
                            string newT = fileName;
                            if (File.Exists(url))
                            {
                                //效驗文件
                                Result rsCheck = checkFile(url);
                                if (rsCheck.Code == 1)
                                {
                                    //以 原有文件名后加入后綴： _T  命名縮略圖
                                    string FileExtensionName = fileName.Substring(fileName.LastIndexOf("."), fileName.Length - fileName.LastIndexOf("."));
                                    string newFileName = fileName.Replace(FileExtensionName, "_T" + FileExtensionName);
                                    newT = newFileName;

                                    //生成文件縮略圖
                                    UploadFileClass.CreateThumbnailImage(url, UploadFileClass.getTmpRootUrlMapPath() + newFileName);
                                }
                            }
                        }
                    }
                }
            }
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

---

   傳統服務器端控件文件上傳代碼模塊

    /// <summary>
    /// 驗證圖片的格式並上傳並生成圖片縮略圖以及水印圖
    /// </summary>
    /// <param name="fup">FileUpload</param>
    /// <returns></returns>
    public static Result UploadFile(FileUpload fup)
    {
        if (!fup.HasFile)
        {
            return new Result(-1,"圖片內容為空！");
        }

        try
        {
            //上傳文件大小限制
             int filesizekb = fup.PostedFile.ContentLength / 1024;
            if (filesizekb > UploadSize)
            {
                return new Result(-1, string.Format("文件大小超出限制！文件大小請控制在{0}KB", UploadSize));
            }

            //文件擴展名及文件類型驗證
             if (CheckFileExtension(fup).Code != 1)
            {
                return new Result(-1, "請選擇正確的圖片格式!");
            }

            //臨時物理路徑
              string dirPath = getTmpRootUrlMapPath();
            if (!Directory.Exists(dirPath))
            {
                Directory.CreateDirectory(dirPath);
            }
            string filepath = string.Format("{0}{1}", dirPath, fup.FileName);

            //將文件上傳至臨時目錄
             fup.PostedFile.SaveAs(filepath);
            //當上傳成功后，判斷文件類型
             if (!File.Exists(filepath))
            {
                return new Result(-1, "上傳失敗文件失敗，未找到上傳文件。");
            }
            //安全效驗文件
             if (checkFile(filepath).Code != 1)
                return new Result(-1, "非法圖片文件！");

            //以 原有文件名后加入后綴： _T  命名縮略圖
             string FileExtensionName = Path.GetExtension(fup.FileName).ToLower();
            string newFileName = fup.FileName.Replace(FileExtensionName, "_T" + FileExtensionName);
            //生成文件縮略圖
             UploadFileClass.CreateThumbnailImage(filepath, UploadFileClass.getTmpRootUrlMapPath() + newFileName);

            return new Result(1, "文件上傳成功！");
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

 

---

 

    保存文件模塊

    /// <summary>
    /// 保存，實際操作就是將臨時目錄里的圖片移動到站點目錄
    /// </summary>
    /// <param name="fileName"></param>
    /// <returns></returns>
    public static Result MoveFile(string fileName)
    {
        try
        {
            string ImgsourceUrl = getTmpRootUrlMapPath() + fileName;
            if (File.Exists(ImgsourceUrl))
            {
                string ImgThumbnailSourceUrl = getTmpRootUrlMapPath() + fileName.Replace("_T", "");

                string mNewImgUrl = getImgRootUrlMapPath() + fileName;
                string mNewImgThumbnailUrl = getImgRootUrlMapPath() + fileName.Replace("_T", "");

                File.Move(ImgsourceUrl, mNewImgUrl);
                File.Move(ImgThumbnailSourceUrl, mNewImgThumbnailUrl);
            }
            return new Result(1, "保存文件成功");
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

 

js 主要代碼：

/// <summary>
/// 上傳控件選擇文件夾路徑
/// </summary>
function selectFile(obj) {
    //判斷當前上傳控件是否包含文件
    //obj.files 此屬性支持IE10、firefox、google chromed等瀏覽器
    if (obj.files != undefined) {
        if (obj.files.length != 0) {
            //自動post到接收頁面
            document.forms[0].action = contralRoot + 'UploadFile.aspx';
            document.forms[0].method = "POST";
            document.forms[0].enctype = "multipart/form-data";  //允許傳遞文件
            document.forms[0].target = "frame1";
            document.forms[0].submit();
            document.getElementById("frame1").height = "500px";
            document.getElementById("frame1").width = "100%";
            obj.value = "";
        }
    }
     //ie8及以下版本將調用提交按鈕事件，但會刷新頁面
    else {
        document.getElementById("ajaxUF_btnsave").click();
    }
}

 

共享盤源碼下載地址：http://pan.baidu.com/s/1mg5OQtq（共享時間有限，如需源碼可加我QQ）

 

源碼中注意事項：

  UploadFileClass.cs 全局變量設置

   /// <summary>
    /// 上傳圖片臨時文件夾虛擬目錄，一般為根目錄下，必須保留路徑前后的符號 ‘/’
    /// </summary>
    public static readonly string tmpRootURL = "/AjaxUploadFileContral/temp/";

    /// <summary>
    /// 圖片站點目錄，一般為根目錄下，必須保留路徑前后的符號 ‘/’
    /// </summary>
    public static readonly string imgRootURL = "/Image/";

    /// <summary>
    /// 定義列表單元格列數，將產生一個N列的表格
    /// </summary>
    public static readonly int listCellCount = 5;

    /// <summary>
    /// 縮略圖寬度
    /// </summary>
    public static readonly int ThumbnailImgWidth = 100;
    /// <summary>
    /// 縮略圖高度
    /// </summary>
    public static readonly int ThumbnailImgHeigth = 100;

    /// <summary>
    /// 限制文件大小300KB
    /// </summary>
    public static readonly int UploadSize = 300;

 

uploadfile.js  全局變量設置

  var contralRoot = "/AjaxUploadFileContral/"; //定義全局控件所在目錄

 

各個瀏覽效果圖：

google chrome：

 

firefox :

 

IE8：