Javaweb实现图片上传服务器、同步保存数据库以及如何在前端页面展示教程...
Javaweb实现图⽚上传服务器、同步保存数据库以及如何在前端页⾯展⽰教程Java web实现图⽚上传服务器、同步保存数据库以及如何在前端页⾯展⽰教程
⼤概流程：
1.上传插件的选择：此篇博⽂选择的是jQuery的zyupload⽂件上传插件；
2.上传请求发起后，java代码的处理：你是要将上传的图⽚只保存在服务器还是只保存在数据库还是说两者都采取。上传到服务器很简单，保存到数据库也很简单，但是此处需要考虑业务，图⽚保存在数据库时采⽤哪种保存⽅式（本博⽂业务来⾃于项⽬，因为图⽚数量巨多，故在数据库是通过保存图⽚的路径实现的，并⾮⼆进制流）；
3.图⽚保存在数据库后，在前段页⾯的回显功能。
⼀、上传
⽬前上传图⽚的插件很多，我在做这个需求的时候也⽤到了好⼏款图⽚上传插件，没有⼀个完美的插件，多多少少都有问题，必要的时候需要改作者的源码。我选择的是zyupload插件。下⾯说说使⽤教程。
1.
2.使⽤⽅法：
下载插件压缩包后，解压。把css⽂件zyupload-1.0.0.css和js⽂件zyupload-1.0.0.js以及图标⽂件夹images引⼊到你的项⽬，images⽂件夹跟zyupload.css⽂件在同⼀个⽬录下。如图：
3.创建⼀个上传组件对象：
<input type="button"onclick="javascrtpt:window.location.href='<%=path%>/uploadPhotoIndex'" value="上传照⽚">滴滴车主
这⾏代码就是创建了⼀个按钮，点击后打开上传图⽚的页⾯。因为我⽤的是SSM加shiro框架，所有页⾯都是在Controller中统⼀处理的，（我的处理代码如下）这⾥显得有点啰嗦，⼤家可以直接转xxx.jsp就可以了。
/**
* 上传图⽚主页
*/
@RequestMapping(value = "/uploadPhotoIndex")
public String uploadPhotoIndex() {
return "bs/uploadPhoto";
}
4.上传页⾯代码：
<%@ page language="java" contentType="text/html; charset=utf-8"
就当是一场梦醒了很久还是很感动
pageEncoding="utf-8"%>
<%
String path = ContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"href="<%=path%>/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/css/zyupload-1.0.0.css" />
<script type="text/javascript" src="<%=path%>/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/zyupload-1.0.0.js"></script>
</head>
<body>
<div id="demo" class="demo"></div>
</body>
<script type="text/javascript">
var path='<%=path%>';
$(function(){
// 初始化插件
$("#demo").zyUpload({
width            :  "100%",                // 宽度
height          :  "400px",                // 宽度
itemWidth        :  "150px",                // ⽂件项的宽度
itemHeight      :  "210px",                // ⽂件项的⾼度
url              :  path+"/test/uploadPhoto",  // 上传⽂件的路径
fileType        :  ["jpg","png","PNG","JPG"],// 上传⽂件的类型
multiple        :  true,                    // 是否可以多个⽂件上传
dragDrop        :  true,                    // 是否可以拖动上传⽂件
del              :  true,                    // 是否可以删除⽂件
finishDel        :  false,        // 是否在上传⽂件完成后删除预览
/* 外部获得的回调接⼝ */
onSelect: function(files, allFiles){                    // 选择⽂件的回调⽅法
console.info("当前选择了以下⽂件：");
中国百科全书
console.info(files);
console.info("之前没上传的⽂件：");
console.info(allFiles);
},
onDelete: function(file, surplusFiles){                    // 删除⼀个⽂件的回调⽅法
console.info("当前删除了此⽂件：");
console.info(file);
console.info("当前剩余的⽂件：");
console.info(surplusFiles);
},
onSuccess: function(file,response){                    // ⽂件上传成功的回调⽅法
console.info("此⽂件上传成功：");
console.info(file);
},
onFailure: function(file){                    // ⽂件上传失败的回调⽅法
console.info("此⽂件上传失败：");
console.info(file);
},
onComplete: function(responseInfo){          // 上传完成的回调⽅法
console.info("⽂件上传完成");
console.info(responseInfo);
myConfirm('提⽰', '所有照⽚上传成功！是否将已上传的照⽚更新到数据库?', insertPhoto, function(){});  }
});
baby歌词中文
});
function insertPhoto(){
$.ajax({
type : 'post',
contentType : 'application/json',
url : path + '/test/insertPhoto',
小学教师个人工作计划processData : false,
dataType : 'json',
data : JSON.stringify({}),
success : function(data) {
if (questResult.success) {
myAlert("提⽰", questResult.successMsg);
} else {
myAlert("提⽰", Msg);
}
},
error : function() {
myAlert("警告", "请求失败");
}
});
}
</script>
</html>
body⾥⾯就⼀句，创建⼀个实例对象就可以，然后通过$("#demo").zyUpload({}）去初始化它。下⾯的五个⽅法特别重要，可以借⽤来扩展你的业务。我是在图⽚全部上传到服务器后调⽤了onComplete: function(responseInfo){}这个⽅法，去询问是否将上传的图⽚更新到数据库，为什么这么做，因为保存图⽚到数据库的时候如果throw异常不好处理，可能后端保存失败了，但是前端提⽰成功了，或者压根就不提⽰。为了⽅便处理异常，我还是选择了通过ajax去保存图⽚路径到数据库。
5.前端上传效果：
⼆、后端代码处理
1.先贴上传到服务器代码：
@RequestMapping(value = "test/uploadPhoto")
public String uploadPhoto(@RequestParam("file") MultipartFile[] file, HttpServletRequest request) throws Exception {  String firstPath = "E:\\tempPhotos";// 存⼊数据库的路径前缀
for (int i = 0; i < file.length; i++) {// 循环存⼊⽂件并组合路径
MultipartFile thisfile = file[i];
String fileName = OriginalFilename();// 得到⽂件名称
File tempFile = new File(firstPath, fileName);
if (fileName != "" && !thisfile.isEmpty()) {
if (!ParentFile().exists()) {// 检测是否存在⽬录
}
}
}
return "bs/uploadPhoto";//上传成功返回上传图⽚页⾯。
}
2.保存图⽚到数据库代码：
前端通过ajax请求实现插⼊的，图⽚上传完成后会调⽤此请求，上述前段代码已提及，上传和保存分开是为了便于处理异常，ajax实现的异步刷新感觉体验好 @RequestMapping(value = "test/insertPhoto")
public @ResponseBody Response insertPhoto1()throws Exception {
Response response = new Response();//这个是我⽤来消息处理的⼯具类。你们可以⽤⾃⼰的替换
String temppath = "E:\\tempPhotos";// 临时上传的图⽚⽬录
String targetpath = "E:\\photos";// 最终备份的图⽚⽬录
File tempfile = new File(temppath);
File targetfile = new File(targetpath);
if (!CanonicalFile().exists()) {// 检测是否存在⽬录
佛系短句干净治愈}
String[] fileName = tempfile.list();
Photos = null；声明⼀个图⽚实体
List<Photos> photos = new ArrayList<>();
try {
for (int i = 0; i < tempfile.list().length; i++) {
photos = new Photos();
//因为图⽚命名是编号_姓名的⽅式，所以这⾥做了⼀个处理，
int index = fileName[i].indexOf("_");
photos .setBh(fileName[i].substring(0, index));
/
/这⾥是关键，存⼊图⽚的路径。⽐如图⽚命名是：123_张三.jpg
存进去就是  /photos/123_张三这样的，采⽤相对路径的办法，实际地址是E:\photos\tempPhotos\123_张三.jpg，关键就在于图⽚在前端展⽰的时候有个⼤坑，稍后会讲到。
photos.setPhoto("/photos/" + fileName[i]);
photolist.add(photos );
}
//通过mybatis框架通过list插⼊图⽚数据。效率⽐使⽤for循环好多了
int m = photosService.updatePhotoList(photolist);
if (m > 0) {
}else {
}
} catch (java.lang.StringIndexOutOfBoundsException e) {
}catch (Exception e) {
}
// 插⼊图⽚到数据库以后先将临时上传的图⽚备份(复制整个临时图⽚⽂件夹到photos⽬录下)
org.apachemons.pyDirectoryToDirectory(tempfile, targetfile);
// 删除临时图⽚⽂件夹
org.apachemons.io.FileUtils.deleteDirectory(tempfile);
return response;
三、数据库读取图⽚在前端页⾯展⽰（重点）
1.采⽤MySQL数据库进⾏存储，存储图⽚的⽅式是通过保存图⽚的相对路径（⾮blob），如图：
2.前端绑定：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。