最新公告
  • 欢迎您光临立业阁,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 基于MVC4+EasyUI开发附件上传组件uploadify的使用_C#教程


    这篇文章主要介绍了基于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开发框架中界面效果如下所示,下图是总体的列表中附件的展示。

    附件编辑和上传界面如下所示。

    附件信息查看效果如下所示:

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

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    • 970会员总数(位)
    • 111831资源总数(个)
    • 3本周发布(个)
    • 0 今日发布(个)
    • 202稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    冀ICP备19022365号-1 百度地图

    侵权联系邮箱[email protected]

    立业阁(www.liyege.cn)免费提供wordpress主题模板、dedecms模板、帝国cms模板、小说网站源码、电影网站源码以及网络技术分享,建站源码,小说模板,电影模板,网赚教程,VPS推荐