基于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>
              <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>

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

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

<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的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2017-08-05

Java中的Web MVC简介_动力节点Java学院整理

Web开发中的请求-响应模型: 在Web世界里,具体步骤如下: 1.Web浏览器(如IE)发起请求. 2.Web服务器(如Tomcat)接收请求,处理请求(比如用户新增,则将把用户保存一下),最后产生响应(一般为html). 3.web服务器处理完成后,返回内容给web客户端(一般就是我们的浏览器),客户端对接收的内容进行处理(如web浏览器将会对接收到的html内容进行渲染以展示给客户). 因此,在Web世界里: 都是Web客户端发起请求,Web服务器接收.处理并产生响应. 一般Web服务器是

Spring MVC完全注解方式配置web项目

在servlet 3.0 开始web项目可以完全不需要web.xml配置文件了,所以本文的配置只在支持servlet 3.0及以上的web容器中有效 使用的是spring mvc (4.3.2.RELEASE) + thymeleaf(3.0.2.RELEASE), 持久层使用的 spring的 JdbcTemplate, PS:推荐一个很好用的对JdbcTemplate封装的框架:https://github.com/selfly/dexcoder-assistant  . 下面开始具体的配置

基于SpringBoot与Mybatis实现SpringMVC Web项目

一.热身 一个现实的场景是:当我们开发一个Web工程时,架构师和开发工程师可能更关心项目技术结构上的设计.而几乎所有结构良好的软件(项目)都使用了分层设计.分层设计是将项目按技术职能分为几个内聚的部分,从而将技术或接口的实现细节隐藏起来. 从另一个角度上来看,结构上的分层往往也能促进了技术人员的分工,可以使开发人员更专注于某一层业务与功能的实现,比如前端工程师只关心页面的展示与交互效果(例如专注于HTML,JS等),而后端工程师只关心数据和业务逻辑的处理(专注于Java,Mysql等).两者之间

基于maven搭建一个ssm的web项目的详细图文教程

1:使用idea建立一个web项目 2:引入pom依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.

基于idea把maven工程转换为web项目

前言 吐槽一下网上的各种转换教程..说的真的是吵来吵去,有用的东西极少.特此自己写一篇好使的. 转换过程建好的maven工程 建好的maven工程长这个鬼样子~~,没有使用骨架.就是普通的建立方式. 生成webapp,web-inf和web.xml 首先选择我们的工程,往idea的右上方看,找到如下的图标 点击后,选择modules,点击上方加号,选择web. 进入如下页面: 上面的path是让你设置生成web.xml的位置. 下面的是让你设置webapp的web目录是哪个. 按照我所展示的目录

spring boot thymeleaf 图片上传web项目根目录操作步骤

thymeleaf介绍 简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下三个极吸引人的特点: 1.Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果.这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式.浏览器解释 html 时会忽略未定义的标签属性,所以 t

基于SpringBoot bootstrap.yml配置未生效的解决

我就废话不多说了,大家还是直接看代码吧~ <!--需要引入该jar才能使bootstrap配置文件生效--> <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-context</artifactId> </dependency> 补充知识:SpringBoot不读取bootstrap.yml/properti

基于SpringBoot构建电商秒杀项目代码实例

一.项目功能概述 电商秒杀需要完成的3个功能: 1.展示一个商品列表页面,我们可以从中看到可秒杀的商品列表 2.点击进入商品详情页,获取该商品的详细信息 3.秒杀时间开始后,点击进入下单确认页面,并支付成功 二.基于SpringBoot进行项目环境搭建 步骤1:创建一个maven工程,使用quickStart骨架. 步骤2:在pom.xml导入SpringBoot相关依赖. <?xml version="1.0" encoding="UTF-8"?> &

通过Spring Boot + Mybatis + Redis快速搭建现代化Web项目

背景 SpringBoot因其提供了各种开箱即用的插件,使得它成为了当今最为主流的Java Web开发框架之一.Mybatis是一个十分轻量好用的ORM框架.Redis是当今十分主流的分布式key-value型数据库,在web开发中,我们常用它来缓存数据库的查询结果. 本篇博客将介绍如何使用SpringBoot快速搭建一个Web应用,并且采用Mybatis作为我们的ORM框架.为了提升性能,我们将Redis作为Mybatis的二级缓存.为了测试我们的代码,我们编写了单元测试,并且用H2内存数据库

SpringBoot快速搭建web项目详细步骤总结

最近在学习Spring Boot 相关的技术,刚接触就有种相见恨晚的感觉,因为用spring boot进行项目的搭建是在太方便了,我们往往只需要很简单的几步,便可完成一个spring MVC项目的搭建,感觉就是下图: 好,下面就本人搭建项目的过程简单说说如何快速搭建一个spring MVC项目,相信我,spring-boot这趟车,你上了根本就停不下来了! 下面是这篇博客的主要内容: spring boot 介绍 spring boot 项目快速搭建 spring-boot中单元测试 sprin

运用springboot搭建并部署web项目的示例

前言 一直以来都是用springmvc+mybatis进行后端接口开发工作,最近闲来无事,根据现有功能需求,用springboot+mybatis部署一套简单的web项目. 所用工具 IntelliJ IDEA 2018.1.4 JDK 1.8 apache-tomcat-8.0.50 所解决的问题 1.如何用idea创建springboot项目 2.如何进行 服务器.数据库.mybatis.视图解析器的配置 3.如何使用mybatis generator 自动生成代码 4.如何使用multip

springmvc+maven搭建web项目

本文实例为大家分享了springmvc maven搭建web项目的具体步骤,供大家参考,具体内容如下 1.创建一个maven project 为spring1 2.进行项目的配置:默认的java 1.5 在properties中选择project facts项目进行配置,反选web之后修改java环境为1.8.修改之后如下图: 3. 配置好的工作目录如下: 4 修改pom.xml文件 增加两个jar包:servlet和spring webmvc pom.xml如下: <!DOCTYPE web-