基於MVC4+EasyUI開發附件上傳組件uploadify的使用

這篇文章主要介紹了基於MVC4+EasyUI的Web開發架構之附件上傳組件uploadify的使用,需要的朋友可以參考下

1、上傳組件uploadify的說明及指令碼引用

Uploadify 是 JQuery 一個著名的上傳外掛程式，利用 Flash 技術，Uploadify 越過瀏覽器的限制，控制了整個上傳的處理過程，實現了用戶端無重新整理的檔案上傳，這樣就實現了在用戶端的上傳進度控制，所以，你首先要確定瀏覽器中已經安裝了 Adobe 的 Flash 外掛程式。

Uploadify 當前有兩個版本，基於 Flash 是免費的，還有基於 HTML5 的收費版，我們使用免費版，目前的版本為v3.2.1。

這個組件需要Jquery庫的支援，一般情況下，需要添加Jquery的js庫，如下所示

<script type="text/javascript" src="~/Scripts/jquery-2.0.3.min.js"></script>

不過由於我的Web開發架構是基於EasyUI的，一般在網頁的開始就會引用相關的類庫，已經包含了Jquery的類庫了，如下所示。

 @*添加Jquery，EasyUI和easyUI的語言套件的JS檔案*@  <script type="text/javascript" src="~/Content/JqueryEasyUI/jquery.min.js"></script>  <script type="text/javascript" src="~/Content/JqueryEasyUI/jquery.easyui.min.js"></script>  <script type="text/javascript" src="~/Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js"></script>

所以我們只需要添加Javascript類庫（jquery.uploadify.js），另外加上他的樣式檔案（uploadify.css）即可：

 @*添加對uploadify控制項的支援*@  @*<script type="text/javascript" src="~/Scripts/jquery-2.0.3.min.js"></script>*@  <script type="text/javascript" src="~/Content/JQueryTools/uploadify/jquery.uploadify.js"></script>  <link href="~/Content/JQueryTools/uploadify/uploadify.css" rel="external nofollow" rel="stylesheet" type="text/css" />

2、上傳組件uploadify在Web介面的使用

首先我們需要在HTML代碼中放置兩個控制項，一個是用來上傳的控制項，一個是用來顯示已上傳列表的控制項，還有就是添加上傳和取消上傳的按鈕操作，如下所示。

 <tr>            <th>              <label for="Attachment_GUID">附件上傳：</label>            </th>            <td>                            <p>                <input class="easyui-validatebox" type="hidden" id="Attachment_GUID" name="Attachment_GUID" />                <input id="file_upload" name="file_upload" type="file" multiple="multiple">                <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" id="btnUpload" data-options="plain:true,iconCls:'icon-save'"                  onclick="javascript: $('#file_upload').uploadify('upload', '*')">上傳</a>                <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" id="btnCancelUpload" data-options="plain:true,iconCls:'icon-cancel'"                  onclick="javascript: $('#file_upload').uploadify('cancel', '*')">取消</a>                <p id="fileQueue" class="fileQueue"></p>                <p id="p_files"></p>                <br />              </p>            </td>          </tr>

介面效果初始化如下所示：

當然，下一步我們需要添加相應的檔案上傳初始化的操作指令碼代碼，如下所示。

<script type="text/javascript">    $(function () {      //添加介面的附件管理      $('#file_upload').uploadify({        'swf': '/Content/JQueryTools/uploadify/uploadify.swf', //FLash檔案路徑        'buttonText': '瀏 覽',                 //按鈕文本        'uploader': '/FileUpload/Upload',            //處理檔案上傳Action        'queueID': 'fileQueue',            //隊列的ID        'queueSizeLimit': 10,             //隊列最多可上傳檔案數量，預設為999        'auto': false,                 //選擇檔案後是否自動上傳，預設為true        'multi': true,                 //是否為多選，預設為true        'removeCompleted': true,            //是否完成後移除序列，預設為true        'fileSizeLimit': '10MB',            //單個檔案大小，0為無限制，可接受KB,MB,GB等單位的字串值        'fileTypeDesc': 'Image Files',         //檔案描述        'fileTypeExts': '*.gif; *.jpg; *.png; *.bmp;*.tif;*.doc;*.xls;*.zip', //上傳的檔案尾碼過濾器        'onQueueComplete': function (event, data) {         //所有隊列完成後事件          ShowUpFiles($("#Attachment_GUID").val(), "p_files"); //完成後更新已上傳的檔案清單          $.messager.alert("提示", "上傳完畢！");                   //提示完成              },        'onUploadStart' : function(file) {          $("#file_upload").uploadify("settings", 'formData', { 'folder': '政策法規', 'guid': $("#Attachment_GUID").val() }); //動態傳參數        },        'onUploadError': function (event, queueId, fileObj, errorObj) {          //alert(errorObj.type + "：" + errorObj.info);        }      });  </script>

在上面的指令碼中，均有注釋，一看就明白相關的屬性了，不明白的也可以到官方網站去尋找瞭解。值得注意的就是

'uploader': '/FileUpload/Upload'

這行就是提交檔案給MVC的Action進行處理，我們在控制器FileUpload的 Upload處理即可。

另外，在附件上傳完畢後，我們需要對所在的介面進行更新，以便顯示已上傳的列表，那麼我們需要增加下面的函數處理即可。

'onQueueComplete': function (event, data) {

最後說明非常值得注意的地方，就是檔案上傳的時候，我們需要動態擷取介面上的一些元素的值，作為參數傳遞，那麼我們就需要在onUploadStart函數中進行如下處理。

$("#file_upload").uploadify("settings", 'formData', { 'folder': '政策法規', 'guid': $("#Attachment_GUID").val() }); //動態傳參數

3、上傳組件uploadify的C#幕後處理代碼

在上面的傳遞參數中，我使用了中文數值，一般情況下，這樣會在後台拿到中文亂碼，所以我們需要在控制器的Action的函數裡面設定它的內容格式，如下所示。

ControllerContext.HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");ControllerContext.HttpContext.Response.ContentEncoding = Encoding.GetEncoding("UTF-8");ControllerContext.HttpContext.Response.Charset = "UTF-8";

控制器FileUpload的幕後處理Action代碼完整如下所示：

 public class FileUploadController : BaseController  {    [AcceptVerbs(HttpVerbs.Post)]    public ActionResult Upload(HttpPostedFileBase fileData, string guid, string folder)    {      if (fileData != null)      {        try        {          ControllerContext.HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");          ControllerContext.HttpContext.Response.ContentEncoding = Encoding.GetEncoding("UTF-8");          ControllerContext.HttpContext.Response.Charset = "UTF-8";          // 檔案上傳後的儲存路徑          string filePath = Server.MapPath("~/UploadFiles/");          DirectoryUtil.AssertDirExist(filePath);          string fileName = Path.GetFileName(fileData.FileName);   //原始檔案名稱          string fileExtension = Path.GetExtension(fileName);     //副檔名          string saveName = Guid.NewGuid().ToString() + fileExtension; //儲存檔案名稱          FileUploadInfo info = new FileUploadInfo();          info.FileData = ReadFileBytes(fileData);          if (info.FileData != null)          {            info.FileSize = info.FileData.Length;          }          info.Category = folder;          info.FileName = fileName;          info.FileExtend = fileExtension;          info.AttachmentGUID = guid;          info.AddTime = DateTime.Now;          info.Editor = CurrentUser.Name;//登入人          //info.Owner_ID = OwerId;//所屬主表記錄ID          CommonResult result = BLLFactory<FileUpload>.Instance.Upload(info);          if (!result.Success)          {            LogTextHelper.Error("上傳檔案失敗:" + result.ErrorMessage);          }          return Content(result.Success.ToString());        }        catch (Exception ex)        {          LogTextHelper.Error(ex);          return Content("false");        }      }      else      {        return Content("false");      }    }    private byte[] ReadFileBytes(HttpPostedFileBase fileData)    {      byte[] data;      using (Stream inputStream = fileData.InputStream)      {        MemoryStream memoryStream = inputStream as MemoryStream;        if (memoryStream == null)        {          memoryStream = new MemoryStream();          inputStream.CopyTo(memoryStream);        }        data = memoryStream.ToArray();      }      return data;    }

4、上傳組件uploadify在Web開發架構中的介面展示

具體上傳組件在的Web開發架構中介面效果如下所示，是總體的列表中附件的展示。

附件編輯和上傳介面如下所示。

附件資訊查看效果如下所示：