需求简介:做新增的时候,需要上传图片。(⊙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. Socket TCP客户端和服务器的实现

    import java.io.*; import java.net.Inet4Address; import java.net.InetSocketAddress; import java.net.S ...

  2. Django REST framework 第六章 ViewSets & Routers

    REST framework包含了一个可以处理ViewSets的抽象, 它允许开发人员专注于API的状态跟交互进行建模,并使得URL构建结构基于通用的约定自动处理. ViewSet类跟View类几乎相 ...

  3. 【多视图几何】TUM 课程 第5章 双视图重建:线性方法

    课程的 YouTube 地址为:https://www.youtube.com/playlist?list=PLTBdjV_4f-EJn6udZ34tht9EVIW7lbeo4 .视频评论区可以找到课 ...

  4. 简单日历dom

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title> ...

  5. MySql cmd下的学习笔记 —— 有关建立表的操作(有关于数据类型)

    (01)建表的过程实际上是 声明字段 的过程 一. 列类型(字段): 存储同样的数据时,不同的列类型,所占据的空间和效率是不一样的,这就是建表时要考虑的意义. 二.MySQL三大列类型     数值型 ...

  6. MySQL主从复制报错1594处理【转】

    一.问题描述 Mysql主从复制模式中,slave上报错 “relay log read failure”,导致主从同步停止. mysql> show slave status\G ****** ...

  7. shell监控自动备份是否成功(判断文件是否存在)

    作者:邓聪聪 在自动打包生成备份sql文件后,对运行情况做一个监控!  命令前加time,查看命令执行完成所用时间! FILE_DIR=/root/ DATE=$(date +%F) FILE_NAM ...

  8. FTP服务器基础设定

    1.安装vsftpd文件服务器 sudo apt-get install vsftpd 2.配置文件:/etc/vsftpd/vsftpd.conf 严格来说,整个 vsftpd 的配置文件就只有这个 ...

  9. 【转】判断处理器是Big_endian的还是Little_endian的

    首先说明一下Little_endian和Big_endian是怎么回事. Little_endian模式的CPU对操作数的存放方式是从低字节到高字节,而Big_endian模式则是从高字节到低字节,比 ...

  10. 关于flock

    昨天在研究dropbear实现时,看到初始化脚本/etc/init.d/dropbear中有关于文件锁lock的内容,如下: lock /tmp/.switch2jffs    mkdir -p /e ...