日常啰嗦
前一篇文章《Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合》讲了富文本编辑器UEditor的整合与使用,虽然其中也集成了图片上传功能,但是有时候需求不同,只需要一个图片上传就行了,不需要全部集成UEditor的,因为UEditor功能比较齐全,因此集成的东西较多,源文件文件也就很多多,是一个较大的插件,如果我只需要一个图片上传功能,却集成这么多东西,是没有必要的,因此本篇单独讲一下图片上传功能。
我的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;
结语
最近两篇文章主要是增加了本项目的一些小功能点,如果有其他建议的话,也希望能留言或者发私信给我,如果感觉还可以的话,也会陆续的添加到项目中来。
相关推荐
完善的Spring+SpringMVC+Mybatis+easyUI后台管理系统(RESTful API+redis).zip 完善的Spring+SpringMVC+Mybatis+easyUI后台管理系统(RESTful API+redis).zip 完善的Spring+SpringMVC+Mybatis+easyUI后台管理系统...
这是一个基于Java技术栈的Web应用开发整合包,主要包含了Spring、SpringMVC、MyBatis、Maven和easyUI这五个关键组件。下面将详细解释这些技术及其整合方式。 **Spring框架**:Spring是一个全面的Java企业级应用开发...
基于Spring+SpringMVC+Mybatis+easyUI实现的后台管理系统,可用作管理系统开发模板 项目经过严格测试,确保可以运行! 功能简介 本项目实现了一个简单的后台管理系统,可以作为ssm项目学习的脚手架,主要包含以下...
Spring+SpringMVC+MyBatis+Shiro+MySQL+Redis+Maven+EasyUI+Bootstrap实现的通用权限管理系统。 Spring+SpringMVC+MyBatis+Shiro+MySQL+Redis+Maven+EasyUI+Bootstrap实现的通用权限管理系统 Spring+SpringMVC+...
【Spring+SpringMVC+Mybatis+easyUI】是一个经典的Java Web开发框架组合,广泛应用于企业级应用系统中。这个组合提供了模型-视图-控制器(MVC)架构模式的实现,以及数据库操作的便捷支持和用户界面的美化。下面我们...
Spring+SpringMVC+MyBatis+Maven+EasyUI是一个经典的Java Web开发技术栈,广泛应用于企业级应用系统开发。这个技术组合提供了完整的后端服务处理、前端展示以及项目构建管理的能力。以下是对这些技术及其整合方式的...
基于spring+springMVC+mybatis+easyui技术实现的医药后台管理系统 项目描述 基于spring+springMVC+mybatis+easyui技术实现的医药管理系统 运行环境 jdk7+tomcat7+mysql+eclipse/IntelliJ IDEA+maven 项目技术...
在IT行业中,构建Web应用程序是一项常见的任务,而SSM(Spring、SpringMVC、MyBatis)框架组合是Java开发中的主流选择。本项目利用这三个框架与前端的EasyUI库协同工作,创建出一个功能丰富的应用程序。在此,我们将...
在本文中,我们将探讨如何使用Spring、SpringMVC、MyBatis和EasyUI进行整合优化,并专注于单元测试的实践。单元测试是软件开发过程中的重要环节,它可以帮助开发者确保代码的功能正确性,提高代码质量,减少缺陷。...
在本项目中,"Spring+SpringMVC+Mybatis+Maven+bootstrap+ajax+jQuery整合开发简单的员工后台管理系统",我们看到一个基于Java技术栈的Web应用开发实例。这个系统利用了多个核心技术来构建一个功能完备的员工管理...
"SpringMvc + Spring + MyBatis + EasyUI"的组合是经典的Java Web开发架构,它提供了完整的功能支持,包括控制层、业务层、持久层以及前端展示。下面我们将详细探讨这些组件的核心知识点: 1. **Spring MVC**:...
这个整合涵盖了四个主要的技术栈,分别是Spring、SpringMVC、Mybatis和EasyUI,每个部分都有其独特的功能和重要性。 **Spring框架**是整个应用程序的基础,它是一个轻量级的容器,提供了依赖注入(DI)和面向切面...
《Spring+SpringMVC+MyBatis+EasyUI 框架整合实战解析》 在当前的Web开发领域,Spring框架以其强大的企业级应用支持、模块化设计和高可扩展性,成为了Java开发者首选的后端框架。而SpringMVC作为Spring框架的一部分...
这是一个基于Java技术栈的Web应用实例,整合了Maven、Spring、SpringMVC、Mybatis、Log4j和EasyUI1.3.2,并且采用了Oracle数据库。让我们逐一解析这些技术及其在项目中的作用。 **Maven**: Maven是一个项目管理和...
后端功能:商品的管理、购物车管理、用户...服务端使用SSM框架(Spring+SpringMVC+MyBatis)+shiro+Maven,使用Myeclipse进行开发。前端使用MUi和HUI框架和vue(与后台交互模板)和Html5+css3来实现移动端App的开发。
在"Java Spring SpringMVC+MyBatis+Maven+easyUI整合代码"项目中,开发者可能需要做以下工作: 1. 配置SpringMVC和MyBatis的集成,定义数据源、事务管理器以及Mapper接口。 2. 创建SSM(Spring-SpringMVC-MyBatis)...
在"Spring+SpringMVC+MyBatis+Maven+easyUI整合代码(2017年4月12日)"这个项目中,开发者已经完成了上述的整合工作,你可以下载"ssm-maven"压缩包,查看并学习整个项目的结构和配置,加深对SSM整合的理解。...
一个SSM(Spring+SpringMVC+Mybatis)+jQuery EasyUI开发的ERP系统
采用easyui+shiro+springmvc+spring+mybatis+mysql easyui作视图层 shiro作权限控制 springmvc作控制层 spring作容器与事务管理 mybatis作数据访问层 mysql作数据存储