文档章节

Spring+SpringMVC+MyBatis+easyUI整合优化篇(七)图片上传功能

zhenfeng13
 zhenfeng13
发布于 2017/05/11 17:22
字数 1031
阅读 36
收藏 1

日常啰嗦

前一篇文章《Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合》讲了富文本编辑器UEditor的整合与使用,虽然其中也集成了图片上传功能,但是有时候需求不同,只需要一个图片上传就行了,不需要全部集成UEditor的,因为UEditor功能比较齐全,因此集成的东西较多,源文件文件也就很多多,是一个较大的插件,如果我只需要一个图片上传功能,却集成这么多东西,是没有必要的,因此本篇单独讲一下图片上传功能。
功能已经部署完毕,点击这里去操作,账密:admin 123456

我的github地址

整合步骤

基于jQuery上传插件Uploadify

页面代码:

//form元素中需添加" enctype='multipart/form-data' "
<form id="fm" method="post" enctype="multipart/form-data">
        <div style="padding-top:50px;  float:left; width:95%; padding-left:30px;">
            <div id="i_do_wrap">
                <div id="pic11" style="display:none;" class="i_do_div rel">

                </div>
                <div class="i_do_div rel" id="picture"><p class="i_do_tle r_txt abs font14">展示图片</p>
                </div>
            </div>
        </div>
    </form>

js上传及回调方法:

//这里只是上传图片的js方法,并将服务端返回的url放入input标签中
function initUploadify() {
        $("#uploadify2").uploadify({
            'uploader': 'swf/uploadify2.swf',           //flash文件的相对路径
            'script': '../loadimg/upload.do',               //后台处理接口的相对路径
            'fileDataName': 'file',                         //设置上传文件名称,默认为Filedata
            'cancelImg': 'images/cancel.png',           //每一个文件上的关闭按钮图标
            'queueID': 'div_progress',                  //文件队列的ID,该ID与存放文件队列的div的ID一致
            'queueSizeLimit': 1,                            //当允许多文件生成时,设置选择文件的个数,默认值:999
            'fileDesc': '*.jpg;*.gif;*.png;*.ppt;*.pdf;*.jpeg',     //用来设置选择文件对话框中的提示文本
            'fileExt': '*.jpg;*.gif;*.png;*.ppt;*.pdf;*.jpeg',      //设置可以选择的文件的类型
            'auto': true,                               //设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传
            'multi': true,                              //设置为true时可以上传多个文件
            'simUploadLimit': 1,                        //允许同时上传的个数 默认值:1
            'sizeLimit': 2048000,                       //上传文件的大小限制
            'buttonText': '上传图片',                       //浏览按钮的文本,默认值:BROWSE
            'displayData': 'percentage',                //上传队列显示的数据类型,percentage是百分比,speed是上传速度
            //回调函数
            'onComplete': function (evt, queueID, fileObj, response, data) {
                $("#img11").attr("src", "../" + response);
                $("#input11").val(response);
                $("#pic11").removeAttr("style");
                $("#img11").removeAttr("style");
                return false;
            },
            'onError': function (event, queueID, fileObj, errorObj) {
                if (errorObj.type === "File Size") {
                    alert("文件最大为3M");
                    $("#uploadify").uploadifyClearQueue();
                }
            },
            'onQueueFull': function (event, queueSizeLimit) {
                alert("最多上传" + queueSizeLimit + "张图片");
                return false;
            }
        });
    }

新建upload文件夹

SpringMVC配置文件

服务端代码中实现图片上传使用的是MultipartFile类,需要在SpringMVC配置文件中新增配置如下:

    <bean id="multipartResolver"    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="1000000"/>
        <property name="defaultEncoding" value="UTF-8"/>
    </bean>

图片上传处理代码

@RequestMapping("/upload")
    public String upload(HttpServletRequest request, HttpServletResponse response, @RequestParam("file") MultipartFile file) throws Exception {
        ServletContext sc = request.getSession().getServletContext();
        String dir = sc.getRealPath("/upload");
        String type = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1, file.getOriginalFilename().length());

        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd_HHmmss");
        Random r = new Random();
        String imgName = "";
        if (type.equals("jpg")) {
            imgName = sdf.format(new Date()) + r.nextInt(100) + ".jpg";
        } else if (type.equals("png")) {
            imgName = sdf.format(new Date()) + r.nextInt(100) + ".png";
        } else if (type.equals("jpeg")) {
            imgName = sdf.format(new Date()) + r.nextInt(100) + ".jpeg";
        } else {
            return null;
        }
        FileUtils.writeByteArrayToFile(new File(dir, imgName), file.getBytes());
        //返回图片的url,结合前端js回调实现上传并回显的功能
        response.getWriter().print("upload/" + imgName);
        return null;
    }

SpringMVC图片上传,成功后异步回传url,上传与实体存储步骤分开。

//保存到数据库中
    function savePicture() {
        $("#fm").form("submit", {
            url: url,
            onSubmit: function () {
                return $(this).form("validate");
            },
            success: function (result) {
                var result = eval('(' + result + ')');
                if (result.success) {
                    $.messager.alert("系统提示", "保存成功");
                    $("#dlg").dialog("close");
                    $("#dg").datagrid("reload");
                    resetValue();
                } else {
                    $.messager.alert("系统提示", "保存失败");
                    window.location.reload();
                    return;
                }
            }
        });
    }

数据库文件

DROP TABLE IF EXISTS `ssm_picture`;

CREATE TABLE `ssm_picture` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `path` varchar(150) DEFAULT NULL,
  `type` int(11) DEFAULT NULL,
  `time` varchar(100) DEFAULT NULL,
  `url` varchar(200) DEFAULT NULL,
  `grade` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

LOCK TABLES `ssm_picture` WRITE;

UNLOCK TABLES;

结语

最近两篇文章主要是增加了本项目的一些小功能点,如果有其他建议的话,也希望能留言或者发私信给我,如果感觉还可以的话,也会陆续的添加到项目中来。

© 著作权归作者所有

zhenfeng13
粉丝 2
博文 32
码字总数 42647
作品 0
杭州
程序员
私信 提问
ZHENFENGSHISAN/perfect-ssm

Quick Start 项目简介 ssm系列 ssm-demo:Spring+SpringMVC+Mybatis+easyUI整合 perfect-ssm:RESTful API+redis缓存 ssm-cluster:前后端分离+集群部署 ssm-dubbo:dubbo服务化 ssm-micro-se......

ZHENFENGSHISAN
2017/09/18
0
0
Thinkphp使用jQuery File Upload异步上传图片实例教程(1):上传单张图片

图片上传是很多网站必备的功能之一,异步多图上传也是很多初学者比较头疼的问题。所以今天我们就使用比较热门的Thinkphp和jquery File upload插件完整的开发一个多图异步上传功能。 这篇文章...

星空幻颖
2017/02/12
0
0
史上最简单的 Spring MVC 教程(九)

1 前言 在史上最简单的 Spring MVC 教程(五、六、七、八)等四篇博文中,咱们已经分别实现了“人员列表”的显示、添加、修改和删除等常见的增、删、改、查功能。接下来,也就是在本篇博文中...

qq_35246620
2017/01/29
0
0
和lock一起学beego 博客系统开发为例(七)

接着上篇来写《和lock一起学beego 博客系统开发为例(六)》 这篇主要完成以下事项: 下篇我们要完成下面三个任务: 1、单图上传 2、多图上传 关于图片上传的功能介绍完,博客系统基本开发流程...

lock-li
2016/06/22
432
0
dhar/YTRichTextEditor

MMRichTextEdit 实现的功能包含了: 编辑器文字编辑 编辑器图片编辑 编辑器图文混排编辑 编辑器图片上传,带有进度和失败提示,可以重新上传操作 编辑器模型转换为HTML格式内容 简单的本地数...

dhar
2017/07/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

从濒临解散到浴火重生,OceanBase 这十年经历了什么?

阿里妹导读:谈及国产自研数据库,就不得不提 OceanBase。与很多人想象不同的是,OceanBase 并非衔着金钥匙出生的宠儿。相反,它曾无人看好、困难重重,整个团队甚至数度濒临解散。 从危在旦...

阿里云云栖社区
18分钟前
1
0
比特币第三方API大全

在开发比特币应用时,除了使用自己搭建的节点,也可以利用第三方提供的比特币api,来获取市场行情、进行交易支付、查询账户余额等。这些第三方api不一定遵循标准的比特币rpc接口规范,但往往...

汇智网教程
29分钟前
1
0
Dozer:Dozer异常java.lang.ClassCastException

这个问题是个很难发现的问题,因为代码本身没有错误,但就是无法找到报错原因 现记录下这个报错 java.lang.ClassCastException:com.XXX.ObjectA cannot be cast to com.XXX.ObjectA 代码中并...

琴兽
今天
2
0
Feign Retryer的默认重试策略测试

1、Feign配置 @Configurationpublic class FeignConfig { @Value("${coupon_service.url:http://localhost:8081}") private String couponServiceUrl; @Bean publ......

moon888
今天
2
0
关于不同域名下的session共享问题

如果登录,首页,分类,列表,产品都在不同的二级域名下,主域名不变,一定要保证里面的版本问题,不能为了更新而更新,这样哪个下面的session都访问不了。

dragon_tech
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部