基于MVC4+EasyUI开发附件上传组件uploadify的使用

1、上传组件uploadify的说明及脚本引用

Uploadify 是 JQuery 一个著名的上传插件，利用 Flash 技术，Uploadify 越过浏览器的限制，控制了整个上传的处理过程，实现了客户端无刷新的文件上传，这样就实现了在客户端的上传进度控制，所以，你首先要确定浏览器中已经安装了 Adobe 的 Flash 插件。

Uploadify 当前有两个版本，基于 Flash 是免费的，还有基于 HTML5 的收费版，我们使用免费版，当前版本为v3.2.1。

这个组件需要Jquery库的支持，一般情况下，需要添加Jquery的js库，如下所示

不过由于我的Web开发框架是基于EasyUI的，一般在网页的开始就会引用相关的类库，已经包含了Jquery的类库了，如下所示。

 @*添加Jquery，EasyUI和easyUI的语言包的JS文件*@
  
  
  

所以我们只需要添加Javascript类库（jquery.uploadify.js），另外加上他的样式文件（uploadify.css）即可：

 @*添加对uploadify控件的支持*@
  @**@
  
  

2、上传组件uploadify在Web界面的使用

首先我们需要在HTML代码中放置两个控件，一个是用来上传的控件，一个是用来显示已上传列表的控件，还有就是添加上传和取消上传的按钮操作，如下所示。

 
            
              附件上传：
            
                          
              

                
                
                上传
                取消
                

                

                

              

            
          

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

在上面的脚本中，均有注释，一看就明白相关的属性了，不明白的也可以到官方网站去查找了解。值得注意的就是

&＃39;uploader&＃39;: &＃39;/FileUpload/Upload&＃39;

这行就是提交文件给MVC的Action进行处理，我们在控制器FileUpload的 Upload处理即可。

另外，在附件上传完毕后，我们需要对所在的界面进行更新，以便显示已上传的列表，那么我们需要增加下面的函数处理即可。

&＃39;onQueueComplete&＃39;: function (event, data) {

最后说明非常值得注意的地方，就是文件上传的时候，我们需要动态获取界面上的一些元素的值，作为参数传递，那么我们就需要在onUploadStart函数中进行如下处理。

$("#file_upload").uploadify("settings", &＃39;formData&＃39;, { &＃39;folder&＃39;: &＃39;政策法规&＃39;, &＃39;guid&＃39;: $("#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.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开发框架中界面效果如下所示，下图是总体的列表中附件的展示。

以上就是基于MVC4+EasyUI开发附件上传组件uploadify的使用的详细内容，更多请关注其它相关文章！