c# asp.net mvc4 使用uploadify外掛程式實現上傳功能

標籤：ted   dstar   nload   star   多檔案   ext   技術分享   obj   mss   

【1】首先去官網下載外掛程式：http://www.uploadify.com/download/ 。ww我使用的是免費的，基於flash的版本。因為基於H5的版本需付費使用，然後使用該外掛程式也就是做做畢設網站，所以就不講究了。

【2】接下來在view中引用uploadify的js與css檔案，再配置uploadify。注意，這裡的路徑隨著你程式中uploadify檔案的位置改變而改變。我是放在與bin檔案夾同級的位置

<link rel="stylesheet" href="~/uploadify/uploadify.css" /><script src="~/uploadify/jquery.uploadify.min.js"></script><script type="text/javascript">    picpath="";    $(function () {        $( "#uploadify").uploadify({        ‘swf‘:  ‘/uploadify/uploadify.swf‘ , //uploadify.swf檔案的相對路徑        ‘cancelImg‘: ‘/uploadify/uploadify-cancel.png‘ , //取消圖片的位置        ‘uploader‘:‘/Account/Upload‘,//幕後處理的相對路徑        ‘buttonText‘: ‘上傳‘ ,//按鈕顯示文字        ‘height‘: 15,//顯示高度，預設30        ‘width‘: 80,//顯示寬度，預設120        ‘fileTypeDesc‘: ‘Image Files‘,        ‘fileTypeExts‘: ‘*.gif; *.jpg; *.png‘,//允許上傳的檔案尾碼        ‘formData‘: {},//發送給背景參數        ‘queueID‘: ‘fileQueue‘ ,//顯示檔案隊列元素的id，預設false        ‘auto‘: false ,//設定選擇檔案後是否自動上傳        ‘multi‘: true ,//設定允許多檔案上傳        ‘queueSizeLimit‘:999, //當允許多檔案上傳時，設定選擇檔案的個數，預設999        //‘onSelect‘: function (event, queueID, fileObj) { //檔案選擇完畢後執行        //    alert( "haha");        //},        //‘onUploadStart‘: function (file) {  //上傳開始前的動作        //    alert( "你好");        //},        ‘onUploadSuccess‘: function (file, data, response) {//上傳儲存後，處理傳回值            var rr = null            rr = eval("(" + data + ")");            //alert(rr.path);            picpath=rr.path;            $("#dishesPic").attr("src",picpath);         }         });    });</script>

【3】同一view中，添加外掛程式的容器，注意容器的name和id，都要是uploadify。外掛程式會尋找name=“uploadify”的標籤

  <div>       <input type="file" name="uploadify" id="uploadify" style="width:120px;height:40px; "/>       <p>       <a onclick="$(‘#uploadify‘).uploadify(‘upload‘)"> 上傳</a>       <a onclick="$(‘#uploadify‘).uploadify(‘cancel‘)"> 取消上傳</a>       </p>      <div id="fileQueue">      </div></div>

【4】後台Controller中處理代碼，ww本人是用該外掛程式上傳圖片，並返回含有圖片另存路徑的資料，格式為json

        //上傳         public JsonResult Upload(HttpPostedFileBase fileData)        {            if (fileData == null || string.IsNullOrEmpty(fileData.FileName) || fileData.ContentLength ==0)            {                return Json(new { flag = false, message = "沒有需要上傳的檔案" });             }            string file = Path.GetFileName(fileData.FileName);//獲得檔案名稱            string extension = Path.GetExtension(fileData.FileName);//獲得副檔名             string uploadDate = DateTime.Now.ToString("yyyyMMddHHmmss");            string savedbname="pic\\"+ Path.GetFileNameWithoutExtension(fileData.FileName) + uploadDate + extension; //儲存到資料庫的檔案名稱            string fullsaveName = System.Web.HttpContext.Current.Request.MapPath("~\\") + savedbname;//完整路徑            fileData.SaveAs(fullsaveName);             return Json(new { flag = true, path = savedbname });        }

好了，按照以上四步，就能基本使用uploadify這個外掛程式上傳了。

如果，上傳檔案時，你需要額外傳遞一些參數，那麼你就是可以使用formData這個參數，格式為‘formData’：{“name”：value}。然後在後台Crontroller中，使用Request["name"]來接收。

 

本人qq：[email protected]

如需轉載，請註明出處

c# asp.net mvc4 使用uploadify外掛程式實現上傳功能