文件无刷新上传(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 }

     //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);
            }
        }