Uploadify是JQuery的一個文件上傳插件,實現的效果非常不錯,目前已經更新到Version3.1.1,官方提供的實例是php版本的,本文將介紹Uploadify在MVC3中的使用,您可以點擊以下鏈接,去官網查看文檔,下載Uploadify插件。
下載Uploadify插件,然后按照以下步驟,在MVC3中應用Uploadify3.1.1插件的上傳功能吧。
1.創建MVC3工程,本例命名為UploadifyTest
2.把解壓后的Uploadify-v3.1文件夾Copy到工程中的Scripts文件夾下。如下圖
以上步驟做完以后,開始寫代碼了。
.cshtml文件中的代碼如下:
<link href="/Scripts/uploadify-v3.1/uploadify.css" rel="stylesheet" type="text/css" /> <script src="/Scripts/jquery-1.4.4.js" type="text/javascript"></script> <script type="text/javascript" src="/Scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js"></script> <script type="text/javascript"> $(function () { $('#upload').uploadify({ 'formData': { 'folder': 'd:\\' }, 'buttonText': '選擇文件', 'buttonClass': 'browser', 'removeCompleted': false, 'swf': '/Scripts/uploadify-v3.1/uploadify.swf', 'uploader': '/Home/Upload' }); }); </script> <head> <style type="text/css"> .browser { color:White; } </style> </head> <input type="file" name="upload" id="upload" />
cs文件代碼如下:
public class HomeController : Controller { public ActionResult Index() { return View(); } [AcceptVerbs(HttpVerbs.Post)] public ContentResult Upload(HttpPostedFileBase FileData, string folder) { string filename = ""; if (null != FileData) { try { filename = Path.GetFileName(FileData.FileName);//獲得文件名 string fullPathname = Path.Combine(folder, filename); saveFile(FileData, folder, filename); } catch (Exception ex) { filename = ex.ToString(); } } return Content(filename); } [NonAction] private bool saveFile(HttpPostedFileBase postedFile, string filepath, string saveName) { bool result = false; if (!Directory.Exists(filepath)) { Directory.CreateDirectory(filepath); } try { postedFile.SaveAs(Path.Combine(filepath, saveName)); result = true; } catch (Exception e) { throw new ApplicationException(e.Message); } return result; } }
上傳效果如下:
用到的上傳參數說明
'formData': 向后台傳遞的參數
'buttonText': 上傳按鈕上顯示的文字
'buttonClass': 給上傳按鈕添加的
class'removeCompleted': 表示在上傳完成后是否刪除隊列中的對應元素。默認是True,即上傳完成后就看不到上傳文件進度條了。
'swf': swf文件路徑
'uploader': 調用后台操作的方法