java实现图片的上传和展示
一、注意事项:
1,该项目主要采用的是springboot+thymeleaf框架
2,代码展示的为ajax完成图片上传(如果不用ajax只需要改变相应的form表单配置即可)
二、效果实现:
1,页面效果:
2,文件夹路径下就会多了对应的图片:
三、代码实现:
1,在html文本中编辑为(采用thymeleaf框架):
<!-- 图片文本框 -->
<input type="file" class="form-control" id="file" name="file" th:onchange="javascript:preview(this)">
<!-- 这个是在上传之前回显图片图片展示 -->
<div id="preview">
<!--这个是为了将页面返回的图片展示出来的.默认隐藏-->
<img style="width: 100px; height: 100px;display:none" id="imgHidden" />
</div> <!-- 提交...这里pageIndex和pageSize可传可不传,主要取决于提交之后是否需要回到当前页面. -->
<button type="submit" th:onclick="javascript:submitForm([[${pageIndex}]],[[${pageSize}]])" class="btn btn-primary">提交</button>
2,编辑js代码:
两种情况:1,有file中有值的时候提交;2,file文件中没有值的时候提交
function submitForm(pageIndex, pageSize) {
var formData = new FormData(); //将需要提交的参数封装起来
formData.append("id", $("#id").val());
var zswb = $("#file").val(); //获取file中的内容,看是否有值
if (zswb == '' || zswb.length < 1) { //没有file提交的时候走的接口
$.ajax({
url : '/editMovieWithoutFile',
type : 'post',
data : formData,
processData : false,
contentType : false,
success : function(value) {
var result = JSON.parse(value);
if (result == 'true') {
window.location.href = "/index?pageIndex=" + pageIndex+ "&pageSize=" + pageSize;
} else {
Lobibox.alert('error', {msg : "媒资信息更新失败!!!"});
}
}
});
} else { //有file提交的时候走的接口
formData.append("file", $("#file")[0].files[0]);
$.ajax({
url : '/editMovieInfo',
type : 'post',
data : formData,
processData : false,
contentType : false,
success : function(value) {
var result = JSON.parse(value);
if (result == 'true') {
window.location.href = "/index?pageIndex=" + pageIndex+ "&pageSize=" + pageSize;
} else {
Lobibox.alert('error', {msg : "媒资信息更新失败!!!"});
}
}
});
}
}
//图片回显:
function preview(file) {
$("#imgHidden").css("display", "none");
var prevDiv = document.getElementById('preview');
if (file.files && file.files[0]) {
var reader = new FileReader();
reader.onload = function(evt) {
prevDiv.innerHTML = '<img style="width: 100px;height: 100px;" src="' + evt.target.result + '" />';
}
reader.readAsDataURL(file.files[0]);
} else {
prevDiv.innerHTML = '<div class="img" style="width: 100px;height:100px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' +
file.value + '\'"></div>';
}
}
3,application.properties中的配置上传的限制
#配置文件传输
spring.servlet.multipart.enabled=true
spring.servlet.multipart.file-size-threshold=0
#单个数据的大小
spring.servlet.multipart.maxFileSize=100MB
#总数据的大小
spring.servlet.multipart.maxRequestSize=100MB
4,controller(这里就不演示无file的情况,因为只是接受参数很简单):
/**
* 有file文件时
* @param movieDto 封装了需要传递过来的参数
* @param file 图片file
*/
@RequestMapping("/editMovieInfo")
@ResponseBody
public String editMovieInfo(@RequestParam("id")final int id,@RequestParam("file")MultipartFile file) {
int result = btShareService.editMovieInfo(id,file,uploadDir);
if (result > -1) {
return JSON.toJSONString("true");
} else {
return JSON.toJSONString("false");
}
}
5,service层处理:
@Transactional
@Override
public int editMovieInfo(int id, MultipartFile file,String uploadDir) {
try {
// 图片路径
String imgUrl = null;
//上传
String filename = upload(file, uploadDir, file.getOriginalFilename());
if (!EmptyUtil.isEmpty(filename)) {
imgUrl = new File(uploadDir).getName() + "/" + filename;
}
MovieInfo movie = movieInfoService.selectMovieInfoByDcpId(Integer.valueOf(movieDto.getId()));
movie .setImgUrl(imgUrl)
movieInfoService.updateMovieInfoByDcpId(movieInfo);
return 0;
} catch (Exception e) {
e.printStackTrace();
return -1;
}
}
图片上传的方法
public String upload(MultipartFile file, String path, String fileName) throws Exception {
// 生成新的文件名
String realPath = path + "/" + UUID.randomUUID().toString().replace("-", "")+fileName.substring(fileName.lastIndexOf("."));
File dest = new File(realPath);
// 判断文件父目录是否存在
if (!dest.getParentFile().exists()) {
dest.getParentFile().mkdir();
}
// 保存文件
file.transferTo(dest);
return dest.getName();
}
6,至于Dao层的操作和数据库修改这里就直接省略了....
java实现图片的上传和展示的更多相关文章
- 【转载】【JAVA秒会技术之图片上传】基于Nginx及FastDFS,完成图片的上传及展示
基于Nginx及FastDFS,完成商品图片的上传及展示 一.传统图片存储及展示方式 存在问题: 1)大并发量上传访问图片时,需要对web应用做负载均衡,但是会存在图片共享问题 2)web应用服务器的 ...
- EasyUI实现图片的上传后与其他文本框的提交以及DataGrid中图片的展示
图片即文件,在jsp中文件上传很简单,一个type为file的input,一个form指定enctype为multipart/form-data,通过post提交到后台利用apache的commons ...
- js实现图片粘贴上传到服务器并展示
最近看了一些有关于js实现图片粘贴上传的demo,实现如下: (这里只能检测到截图粘贴和图片右键复制之后粘贴) demo1: document.addEventListener('paste', fu ...
- java模拟表单上传文件,java通过模拟post方式提交表单实现图片上传功能实例
java模拟表单上传文件,java通过模拟post方式提交表单实现图片上传功能实例HttpClient 测试类,提供get post方法实例 package com.zdz.httpclient; i ...
- 利用WebUploader进行图片批量上传,在页面显示后选择多张图片压缩至指定路径【java】
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览 ...
- Java FtpClient 实现文件上传服务
一.Ubuntu 安装 Vsftpd 服务 1.安装 sudo apt-get install vsftpd 2.添加用户(uftp) sudo useradd -d /home/uftp -s /b ...
- java实现文件的上传和下载
1. servlet 如何实现文件的上传和下载? 1.1上传文件 参考自:http://blog.csdn.net/hzc543806053/article/details/7524491 通过前台选 ...
- springmvc图片文件上传接口
springmvc图片文件上传 用MultipartFile文件方式传输 Controller package com.controller; import java.awt.image.Buffer ...
- java微信接口之四—上传素材
一.微信上传素材接口简介 1.请求:该请求是使用post提交地址为: https://api.weixin.qq.com/cgi-bin/media/uploadnews?access_token=A ...
随机推荐
- .NET 5 Preview 1的深度解读和跟进
这几天微软.NET 团队发布了.NET 5 Preview-1, 如约而至.很兴奋,因为.NET Core和.NET Framework终于实现了大一统,同时也很期待,期待.NET 5能给我们带来哪些 ...
- angualrjs 总结 随记(三)
$sanitize和$sce服务的使用方法 $sanitize会把标签的属性都移除,以及绑定在元素上的事件.仅保留了标签和内容 $q服务的使用1. 创建一个Service,去服务器读取数据: 2. 在 ...
- 图解Java设计模式之模板模式
图解Java设计模式之模板模式 豆浆制作问题 模板方法模式基本介绍 模板方法模式原理类图 模板方法模式解决豆浆制作问题 模板方法模式的钩子方法 模板方法模式在Spring框架中的源码分析 模板方法模式 ...
- cmdb客户端采集数据的完善
file文件自己去拷贝(这里不提供) custom_settings.py import os BASEDIR = os.path.dirname(os.path.dirname(os.path.ab ...
- .NET Core技术研究-配置读取
升级ASP.NET Core后,配置的读取是第一个要明确的技术.原先的App.Config.Web.Config.自定义Config在ASP.NET Core中如何正常使用.有必要好好总结整理一下,相 ...
- 如何定时备份Mysql数据库
1.创建备份数据库存储目录 cd data/db mkdir backup #创建存储目录 2.添加备份脚本 vim backupdb.sh #创建脚本文件 脚本内容如下: #!/bin/sh db_ ...
- OpenCV-Python 轮廓特征 | 二十二
目标 在本文中,我们将学习 如何找到轮廓的不同特征,例如面积,周长,质心,边界框等. 您将看到大量与轮廓有关的功能. 1. 特征矩 特征矩可以帮助您计算一些特征,例如物体的质心,物体的面积等.请查看特 ...
- Hinton老爷子CapsNet再升级,结合无监督,接近当前最佳效果
2017 年,Geoffrey Hinton 在论文<Dynamic Routing Between Capsules>中提出 CapsNet 引起了极大的关注,同时也提供了一个全新的研究 ...
- Python学习笔记:List类型所有方法汇总
###############################红色标红的部分为常用方法############################### import copy names = [&quo ...
- JS 剑指Offer(五) 二叉树的重建
题目:输入某二叉树的前序遍历和中序遍历的结果,请重建该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字. 题目分析:已知二叉树的前序和中序遍历,根据前序遍历和中序遍历的规则,前序遍历的第一 ...