需求简介:做新增的时候,需要上传图片。(⊙o⊙)…这需求描述也太简单了吧,限制文件大小60*60 512kb ,第一次做,记录一下嗷,废话就不啰嗦了 上代码

代码:

//html代码
<div class="col-md-5">
<input type="file" value="上传图标" id="fileupload" th:onchange="|fileUpload()|" style="display:none"/>
  //此src是 上传的小图标图片
<img src="D:/img/shangchuan.png" alt="" th:onclick="|doUpload()|" id="imageId" style="margin-top: 10px;"/>
<input type="hidden" id="serviceIcon" name="serviceIcon" class="form-control"/>
</div>
//js代码
<script type="text/javascript" th:inline="javascript" xmlns:th="http://www.w3.org/1999/xhtml">
function doUpload(){
$("#fileupload").trigger("click");
}
   //文件上传
function fileUpload(file){
debugger;
var myform = new FormData();
myform.append('file', $("#fileupload")[0].files[0]);
var max_size = 512;// 300k
var tmpFile = $("#fileupload").val();
var imgtype = tmpFile.toLowerCase().split('.');
if ((imgtype[1]) != "jpg") {
layer.msg("图片只支持jpg格式");
tmpFile.value = "";
return false;
} else {
$.ajax({
type:"POST",
url: rootPath + "/serv/service/updatefile",
data:myform,
cache: false,
contentType: false,
processData: false,
dataType: "json",//返回的数据格式
async: false,
success: function (data) {
debugger;
if(data==="1" ){
layer.msg("上传失败,图片内存过大");
}else if(data=="2"){
layer.msg("上传失败,图片内存过大");
}else{
var path="/oh-manager/"+data;
                 //取代原来的上传图片的小图标 展示上传后的图片
$("#imageId").attr("src",path);
$("#serviceIcon").val(path);
}
},
error: function (jqXHR, textStatus, errorThrown) { }
});
}
     return false;
}
</script> //后台java代码:
@RequestMapping(value="/updatefile")
@ResponseBody
public String updatefile(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
String contentType = file.getContentType();
String fileName = file.getOriginalFilename();
   try {
File targetFile = new File("D:/");
if(!targetFile.exists()){
targetFile.mkdirs();
}
FileOutputStream out = new FileOutputStream("D:/temp/"+fileName);
out.write(file.getBytes());
File fileRoute = new File("D:/temp/"+fileName);
BufferedImage sourceImg =ImageIO.read(new FileInputStream(fileRoute));
Long size = file.getSize() / 1024; // 图片大小
int wid=sourceImg.getWidth(); // 源图宽度
int hei=sourceImg.getHeight(); // 源图高度
if(size>512){
fileName="1";
}
if(wid>60 || hei>60){
fileName="2";
}
out.flush();
out.close();
} catch (Exception e) {
// TODO: handle exception
}
long length=file.getSize();
//返回json
return fileName; //fileName就是上边ajax的data
}
//配置文件constant.properties配置文件路径
web.upload-path=D:/temp/
spring.mvc.static-path-pattern=/**
spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,\
classpath:/static/,classpath:/public/,file:${web.upload-path}

SpringBoot图片上传(二)的更多相关文章

  1. SpringBoot图片上传(四) 一个input上传N张图,支持各种类型

    简单介绍:需求上让实现,图片上传,并且可以一次上传9张图,图片格式还有要求,网上找了一个测试了下,好用,不过也得改,仅仅是实现了功能,其他不尽合理的地方,还需自己打磨. 代码: //html<d ...

  2. SpringBoot图片上传(三)——调用文件上传项目的方法(同时启动两个项目)

    简单说明:图片上传有一个专门的工程A,提供了图片的上传和下载预览,工程B涉及到图片上传以及回显,都是调用的工程A的方法,言外之意就是要同时启动两个项目. 代码: //工程B的html代码 <di ...

  3. SpringBoot图片上传(五) 上一篇的新版本,样式修改后的

    简单描述:一次上传N张图片(N可自定义):上传完后图片回显,鼠标放到已经上传的图片上后,显示删除,点击后可以删除图片,鼠标离开后,图片恢复. 效果:一次上传多个图片后的效果 上传成功: 鼠标悬浮到图片 ...

  4. SpringBoot图片上传

    毕设终于写到头像上传了,本来想用Vue写来着,但是一直不顺利,还是对Vue用的不太熟.所以就用jquery写了. 首先添加以下标签 <img id="avatarPreview&quo ...

  5. SpringBoot图片上传(一)

    简单描述:点击上传文件的图标,上传文件,上传成功后,图标编程上传的图片. 吐槽:文件上传下载这种东西,总是感觉莫名的虚-_-||  也不知道是造了什么孽,(其实就是IO File这一块的知识了解的不太 ...

  6. ckeditor图片上传二三事

    最近实验室要用ckeditor,踩了几个小坑记录下. 1.出现iframe跨域问题 response.setHeader("X-Frame-Options", "SAME ...

  7. springboot整合ueditor实现图片上传和文件上传功能

    springboot整合ueditor实现图片上传和文件上传功能 写在前面: 在阅读本篇之前,请先按照我的这篇随笔完成对ueditor的前期配置工作: springboot+layui 整合百度富文本 ...

  8. springboot项目上传存储图片到七牛云服务器

    springboot项目上传存储图片到七牛云服务器 问题描述: 当图片存在本地时会出现卡顿的现象.比如一篇图文混排的文章,如果图片没有加载完,可能整个文章都显示不出来,因为它们都是用的同一个服务器. ...

  9. .net mvc + layui做图片上传(二)—— 使用流上传和下载图片

    摘要:上篇文章写到一种上传图片的方法,其中提到那种方法的局限性,就是上传的文件只能保存在本项目目录下,在其他目录中访问不到该文件.这与浏览器的安全性机制有关,浏览器不允许用户用任意的路径访问服务器上的 ...

随机推荐

  1. 【JS】空格分隔手机号

    '88888888888'.replace(/^(.{3})(.*)(.{4})$/, '$1 $2 $3')

  2. day 10 - 1 函数进阶

    函数进阶 命名空间和作用域 命名空间 命名空间 有三种内置命名空间 —— python解释器 就是python解释器一启动就可以使用的名字存储在内置命名空间中 内置的名字在启动解释器的时候被加载进内存 ...

  3. 一张图片资源要占用多大内存xhdpi xxhdpi

    一张图片资源要占用多大内存,可以用下面的计算公式计算 4 * withPixel*(targetDensity /sourcedensity) * heightPixel*(targetDensity ...

  4. 【Java编程思想笔记】-集合2

    详细的接口API转自博客:https://blog.csdn.net/jyg0723/article/details/80498840#collection-api-%E8%AF%A6%E8%A7%A ...

  5. 机器学习超参数优化算法-Hyperband

    参考文献:Hyperband: Bandit-Based Configuration Evaluation for Hyperparameter Optimization I. 传统优化算法 机器学习 ...

  6. Invalid character found in the request target.

    背景:springboot项目内置tomcat9.0 调用的接口中有{}就会报错 解决办法: 新的tomcat新版本增加了一个新特性,就是严格按照 RFC 3986规范进行访问解析,而 RFC 398 ...

  7. 2.获取公开的漏洞信息-查询还有哪些系统补丁未堵住-查询exp

    本章内容为第一课的实战部分,请结合原创一起浏览. 微软官网 https://www.microsoft.com/zh-cn 在页脚找到TechNet 查看安全公告 MS系列微软编号在微软安全报告中存在 ...

  8. Intel Xeon E5-2620 v4参数

    基本参数 CPU系列 Xeon E5 v4系列 制作工艺 14纳米 核心代号 Broadwell 性能参数 核心数量 八核心 线程数量 十六线程 CPU主频 2.1GHz 动态加速频率 3GHz L3 ...

  9. ansible 常见指令表

    Play 指令 说明 accelerate 开启加速模式 accelerate_ipv6 是否开启ipv6 accelerate_port 加速模式的端口 always_run   any_error ...

  10. canvas画流程图

    用canvas画流程图: 需求:最后一个圆圈无直线 遇到问题:需要画多个圆圈时,画布超出显示屏加滚动条,解决方法是<canvas>外层<div>的width=100%,且ove ...