需求简介:做新增的时候,需要上传图片。(⊙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】获取一个月份有多少天

    new Date(year, month, 0).getDate() 通过 Date 构造函数传入年份.月份.零,然后通过调用获取日期函数即可获取当前月份有多少天 new Date(2019, 2, ...

  2. 利用html5中json的方法做对象的深拷贝解决引用的相互干扰

    var a=[name:'zs']; var str=Json.stringify(a); var b=Json.parse(str);//这里是将一个新对象赋值给b.与a没有引用同一个对象 b.na ...

  3. 《SSH网上商城》-视频目录--代码可以跑起来

    本课程是2015年2月份的,就是14年底的. 课程第一天的代码-添加 jsp-api.jar   servlet-api.jar就可以跑起来,环境 JDK1.7 和tomcat8, SSH网上商城\S ...

  4. php 实现二维数组转字符串 一步到位

    第一种方法 使用 array_reduce函数  详情点击查看 第二种方法:

  5. Java中通过脚本引擎调用js函数

    import java.io.*; import javax.script.Invocable; import javax.script.ScriptEngine; import javax.scri ...

  6. dubbo源码分析14——DubboProtocol的export方法分析

    走到了这一步也挺不容易的,把之前的暴露入口代码再列出来回顾一下: //配置为none不暴露 if (! Constants.SCOPE_NONE.toString().equalsIgnoreCase ...

  7. CString/string 区别及其转化

    CString/string 区别及其转化 利用MFC进行编程时,我们从对话框中利用GetWindowText得到的字符串是CString类型,CString是属于MFC的类.而一些标准C/C++库函 ...

  8. 【转】Leveldb源码分析——1

    先来看看Leveldb的基本框架,几大关键组件,如图1-1所示. Leveldb是一种基于operation log的文件系统,是Log-Structured-Merge Tree的典型实现.LSM源 ...

  9. Tour HDU - 3488 有向环最小权值覆盖 费用流

    http://acm.hdu.edu.cn/showproblem.php?pid=3488 给一个无源汇的,带有边权的有向图 让你找出一个最小的哈密顿回路 可以用KM算法写,但是费用流也行 思路 1 ...

  10. Alpha冲刺(9/10)

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:冲刺倒计时之9 团队部分 后敬甲(组长) 过去两天完成了哪些任务 答辩准备中 和大佬们跟进进度 接下来的计划 准备答辩 ...