多文件无刷新上传（一）

本代码实现图片文件上传并生成缩略图以及文件安全效验等。

多文件上传效果只兼容  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：