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

程序员文章站 2022-03-27 08:33:22

1、上传组件uploadify的说明及脚本引用 uploadify 是 jquery 一个著名的上传插件，利用 flash 技术，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>              
              <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>

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

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

当然，下一步我们需要添加相应的文件上传初始化的操作脚本代码，如下所示。

<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(), "div_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开发框架中界面效果如下所示，下图是总体的列表中附件的展示。

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