0

0

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

巴扎黑

巴扎黑

发布时间:2017-08-10 16:34:16

|

2678人浏览过

|

来源于php中文网

原创

这篇文章主要介绍了基于mvc4+easyui的web开发框架之附件上传组件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代码中放置两个控件,一个是用来上传的控件,一个是用来显示已上传列表的控件,还有就是添加上传和取消上传的按钮操作,如下所示。


 
            
              
            
                          
              

上传 取消


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

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


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

mallcloud商城
mallcloud商城

mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合,项目代码简洁注释丰富上手容易,适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案,面向互联网设计同时适合B端和C端用户,支持CI/CD多环境部署,并提

下载


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

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

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

相关专题

更多
PHP WebSocket 实时通信开发
PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践,涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例,帮助开发者掌握 使用 PHP 构建实时通信与推送服务的完整开发流程,适用于即时消息与高互动性应用场景。

8

2026.01.19

微信聊天记录删除恢复导出教程汇总
微信聊天记录删除恢复导出教程汇总

本专题整合了微信聊天记录相关教程大全,阅读专题下面的文章了解更多详细内容。

49

2026.01.18

高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

106

2026.01.16

全民K歌得高分教程大全
全民K歌得高分教程大全

本专题整合了全民K歌得高分技巧汇总,阅读专题下面的文章了解更多详细内容。

152

2026.01.16

C++ 单元测试与代码质量保障
C++ 单元测试与代码质量保障

本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法,包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程,以及常见代码质量问题的发现与修复。通过工程化示例,帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。

58

2026.01.16

java数据库连接教程大全
java数据库连接教程大全

本专题整合了java数据库连接相关教程,阅读专题下面的文章了解更多详细内容。

44

2026.01.15

Java音频处理教程汇总
Java音频处理教程汇总

本专题整合了java音频处理教程大全,阅读专题下面的文章了解更多详细内容。

20

2026.01.15

windows查看wifi密码教程大全
windows查看wifi密码教程大全

本专题整合了windows查看wifi密码教程大全,阅读专题下面的文章了解更多详细内容。

111

2026.01.15

浏览器缓存清理方法汇总
浏览器缓存清理方法汇总

本专题整合了浏览器缓存清理教程汇总,阅读专题下面的文章了解更多详细内容。

45

2026.01.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
EasyUI基础入门视频教程
EasyUI基础入门视频教程

共20课时 | 5.3万人学习

jQuery EasyUI中文参考手册
jQuery EasyUI中文参考手册

共67课时 | 35.4万人学习

Rust 教程
Rust 教程

共28课时 | 4.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号