文件无刷新上传(swfUpload与uploadify)

文件无刷新上传并获取保存到服务器端的路径

遇到上传文件的问题，结合之前用到过的swfUpload，又找了一个无刷新上传文件的jquery插件uploadify，写篇博客记录一下分别介绍这两个插件的实现方法

1. swfUpload

• 导入swfUpload的开发包
• 添加js引用，引用swfUpload.js与handler.js文件，如果对swfUpload不了解、有疑问可以看看这篇博客
• 页面初始化

  

• 修改handler.js文件中 上传成功的事件,serverData是服务器端的响应

  

1. Uploadify

• 导入uploadify开发包，从官网下载，官网文档，中文文档，官网示例
• 添加js与css的引用，jquery.uploadify.js 、uploadify.css

  （注：在css中引用uploadify-cancel.png图片文件的路径是可能不正确，可以在uploadify.css文件中自己进行更改）

• 页面初始化

  页面初始化时，可以指定许多设置，并对上传成功的事件进行重载，data表示服务器端的响应

  

• 服务器端上传处理程序

  1     /// <summary>
  2     /// 上传文件
  3     /// </summary>
  4     public class UploadFileHandler : IHttpHandler, IRequiresSessionState
  5     {
  6         public void ProcessRequest(HttpContext context)
  7         {
  8             context.Response.ContentType = "text/plain";
  9             //验证上传权限
 10             if (context.Session["User"] == null)
 11             {
 12                 context.Response.Write("no permission");
 13                 context.Response.End();
 14                 return;
 15             }
 16             try
 17             {
 18                 //获取上传文件
 19                 //Filedata是客户端已经定义好的，如果想要更改，更改js文件中的配置
 20                 HttpPostedFile image_upload = context.Request.Files["Filedata"];
 21                 //获取文件扩展名
 22                 string fileExt = System.IO.Path.GetExtension(image_upload.FileName).ToLower();
 23                 //验证文件扩展名是否符合要求，是否是允许的图片格式
 24                 if (!FileTypes.IsAllowed(fileExt))
 25                 {
 26                     return;
 27                 }
 28                 //当前时间字符串
 29                 string timeString = DateTime.Now.ToString("yyyyMMddHHmmssfff");
 30                 //保存虚拟路径构建
 31                 string path = "/Upload/" + timeString + fileExt;
 32                 //获取、构建要上传文件的物理路径
 33                 string serverPath = context.Server.MapPath("~/" + path);
 34                 //保存图片到服务器
 35                 image_upload.SaveAs(serverPath);
 36                 //输出保存路径
 37                 context.Response.Write(path);
 38             }
 39             catch (Exception ex)
 40             {
 41                 context.Response.Write("Error");
 42                 //记录日志
 43                 new Common.LogHelper(typeof(UploadFileHandler)).Error(ex);
 44             }
 45         }
 46
 47         public bool IsReusable
 48         {
 49             get
 50             {
 51                 return false;
 52             }
 53         }
 54     }
 55     public static class FileTypes
 56     {
 57         private static List<string> allowedFileTypes = new List<string>();
 58         //获取允许json配置文件
 59         private static string jsonFilePath = Common.PathHelper.MapPath("~/AllowedFileTypes.json");
 60
 61         /// <summary>
 62         /// 允许的文件类型
 63         /// </summary>
 64         public static List<string> AllowedFileTypes
 65         {
 66             get
 67             {
 68                 return allowedFileTypes;
 69             }
 70
 71             set
 72             {
 73                 allowedFileTypes = value;
 74             }
 75         }
 76
 77         /// <summary>
 78         /// 静态构造方法
 79         /// </summary>
 80         static FileTypes()
 81         {
 82             LoadFileTypesFromJson();
 83         }
 84
 85         /// <summary>
 86         /// 从json文件中读取允许上传的文件类型
 87         /// </summary>
 88         private static void LoadFileTypesFromJson()
 89         {
 90             string types = File.ReadAllText(jsonFilePath);
 91             AllowedFileTypes = Common.ConverterHelper.JsonToObject<List<string>>(types);
 92         }
 93
 94         /// <summary>
 95         /// 当添加允许文件类型时，更新到json文件
 96         /// </summary>
 97         public static void FileTypesToJson()
 98         {
 99             string types = Common.ConverterHelper.ObjectToJson(AllowedFileTypes);
100             File.WriteAllText(jsonFilePath, types);
101         }
102
103         /// <summary>
104         /// 新增允许上传文件扩展名
105         /// </summary>
106         /// <param name="newFileType"></param>
107         public static void AddNewFileType(string newFileType)
108         {
109             AllowedFileTypes.Add(newFileType);
110             FileTypesToJson();
111         }
112
113         /// <summary>
114         /// 判断某种文件类型是否允许上传
115         /// </summary>
116         /// <param name="fileExt">文件扩展名</param>
117         /// <returns>是否允许上传<code>true</code>允许上传</returns>
118         public static bool IsAllowed(string fileExt)
119         {
120             foreach (string item in AllowedFileTypes)
121             {
122                 if (fileExt.Equals(fileExt))
123                 {
124                     return true;
125                 }
126             }
127             return false;
128         }
129     }

UploadFileHandler

      //uploadify初始化
         $(function () {
             $('#file_upload').uploadify({
                 //指定swf
                 'swf': '/uploadify/uploadify.swf',
                 //服务器端处理程序
                 'uploader': '/Admin/UploadFileHandler.ashx',
                 //按钮文本
                 buttonText: '上传附件',
                 //文件类型
                 fileTypeExts: "*.zip;*.rar;*.doc;*.docx;*.xls;*xlsx",
                 onUploadSuccess: OnFileUploadSuccess
             });
         });
         function OnFileUploadSuccess(file, data, response) {
             //服务器端响应
             if (data == 'noPermission') {
                 alert('没有上传权限');
             }
             if (data == 'Error') {
                 alert('上传失败');
             } else if (response) {
                 alert('上传成功~~~');
                 $("#filePath").val(data);
             }
         }

uploadify