基於jquery的上傳插件Uploadify 3.1.1在MVC3中的使用


   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': 調用后台操作的方法

 

 


免責聲明!

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



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