需求简介:做新增的时候,需要上传图片。(⊙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. 【Git】Git常见错误

    错误1.fatal: refusing to merge unrelated histories 致命的:拒绝合并不相关的历史 原因:比如我本地分支是V1.0,我现在想要合并远程master分支上的内 ...

  2. Python问题:UnboundLocalError: local variable 'xxx' referenced before assignment

    参考链接: http://blog.csdn.net/onlyanyz/article/details/45009697 https://www.cnblogs.com/fendou-999/p/38 ...

  3. python - pymysql模块

    pymsql 模块 基本应用介绍: # 安装模块 pip install PyMySql # 导入模块 import pymysql # 配置连接信息 config = { 'host':'127.0 ...

  4. java程序内存监控

  5. drand48 等 随机数生成函数

    参考: http://www.man7.org/linux/man-pages/man3/drand48.3.html drand48 返回服从均匀分布的·[0.0, 1.0) 之间的 double ...

  6. Linxu基础知识:终端、终端模拟器、shell

    实验楼课程第二个实验的讲解部分出现了三个词,我不知道它们三个是什么关系.查阅了度娘,归纳如下: - 终端: 在UNIX/LINUX系统中,用户通过终端登录系统后得到一个Shell进程,这个终端就成为S ...

  7. 使用PHP、MySQL实现修改密码 + 防止通过url强行进入系统

    ●使用PHP+MySQL实现修改密码 页面: index.php  登陆页面,输入默认密码登陆系统 check.php 核查页面,通过查询数据库检测密码是否正确   ——> 正确,则进入系统   ...

  8. 【MongoDB】 Failed to connect to 127.0.0.1:27017, reason: Connection refused

    由于项目需要,在一台虚拟机上安装了MongoDB,但是在启动的时候,出现如下错误: [root@localhost bin]# ./mongo MongoDB shell version v3.4.0 ...

  9. Linux系统特点

    自由软件 真正的多用户.多任务操作系统 极强的平台可伸缩性 强大的管理功能 强大的网络功能

  10. 设计模式C++学习笔记之二(Proxy代理模式)

      代理,一看名字就知道这只是个中介而已,真实的执行者在代理的后面呢.cbf4life在他的书里提的例子也很有趣,更详细的内容及说明可以参考原作者博客:cbf4life.cnblogs.com.现在贴 ...