基于MVC4+EasyUI的Web開發(fā)框架之附件上傳組件uploadify的使用

更新時(shí)間：2017年08月07日 14:35:44 作者：伍華聰

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

1、上傳組件uploadify的說明及腳本引用

Uploadify 是 JQuery 一個(gè)著名的上傳插件，利用 Flash 技術(shù)，Uploadify 越過瀏覽器的限制，控制了整個(gè)上傳的處理過程，實(shí)現(xiàn)了客戶端無刷新的文件上傳，這樣就實(shí)現(xiàn)了在客戶端的上傳進(jìn)度控制，所以，你首先要確定瀏覽器中已經(jīng)安裝了 Adobe 的 Flash 插件。

Uploadify 當(dāng)前有兩個(gè)版本，基于 Flash 是免費(fèi)的，還有基于 HTML5 的收費(fèi)版，我們使用免費(fèi)版，當(dāng)前版本為v3.2.1。

這個(gè)組件需要Jquery庫的支持，一般情況下，需要添加Jquery的js庫，如下所示

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

不過由于我的Web開發(fā)框架是基于EasyUI的，一般在網(wǎng)頁的開始就會引用相關(guān)的類庫，已經(jīng)包含了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代碼中放置兩個(gè)控件，一個(gè)是用來上傳的控件，一個(gè)是用來顯示已上傳列表的控件，還有就是添加上傳和取消上傳的按鈕操作，如下所示。

 <tr>
            <th>
              <label for="Attachment_GUID">附件上傳：</label>
            </th>
            <td>              
              <div>
                <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>
                <div id="fileQueue" class="fileQueue"></div>
                <div id="div_files"></div>
                <br />
              </div>
            </td>
          </tr>

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

當(dāng)然，下一步我們需要添加相應(yīng)的文件上傳初始化的操作腳本代碼，如下所示。

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

在上面的腳本中，均有注釋，一看就明白相關(guān)的屬性了，不明白的也可以到官方網(wǎng)站去查找了解。值得注意的就是

'uploader': '/FileUpload/Upload'

這行就是提交文件給MVC的Action進(jìn)行處理，我們在控制器FileUpload的 Upload處理即可。

另外，在附件上傳完畢后，我們需要對所在的界面進(jìn)行更新，以便顯示已上傳的列表，那么我們需要增加下面的函數(shù)處理即可。

'onQueueComplete': function (event, data) {

最后說明非常值得注意的地方，就是文件上傳的時(shí)候，我們需要動態(tài)獲取界面上的一些元素的值，作為參數(shù)傳遞，那么我們就需要在onUploadStart函數(shù)中進(jìn)行如下處理。

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

3、上傳組件uploadify的C#后臺處理代碼

在上面的傳遞參數(shù)中，我使用了中文數(shù)值，一般情況下，這樣會在后臺拿到中文亂碼，所以我們需要在控制器的Action的函數(shù)里面設(shè)置它的內(nèi)容格式，如下所示。

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);     //文件擴(kuò)展名
          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開發(fā)框架中的界面展示

具體上傳組件在的Web開發(fā)框架中界面效果如下所示，下圖是總體的列表中附件的展示。