文件无刷新上传并获取保存到服务器端的路径(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     }

 1      //uploadify初始化 2         $(function () { 3             $('#file_upload').uploadify({ 4                 //指定swf 5                 'swf': '/uploadify/uploadify.swf', 6                 //服务器端处理程序 7                 'uploader': '/Admin/UploadFileHandler.ashx', 8                 //按钮文本 9                 buttonText: '上传附件',10                 //文件类型11                 fileTypeExts: "*.zip;*.rar;*.doc;*.docx;*.xls;*xlsx",12                 onUploadSuccess: OnFileUploadSuccess13             });14         });15         function OnFileUploadSuccess(file, data, response) {16             //服务器端响应17             if (data == 'noPermission') {18                 alert('没有上传权限');19             }20             if (data == 'Error') {21                 alert('上传失败');22             } else if (response) {23                 alert('上传成功~~~');24                 $("#filePath").val(data);25             }26         }