文件無刷新上傳(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
 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: OnFileUploadSuccess
13             });
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         }
uploadify

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM