图片上传
图片多张上传时在input中添加multiple属性
<img type="file" multiple="multiple"/>
1、上传图片
<label for="fengmian" class="btn btn-success btn-xs">上传封面</label>
<input type="file" id="fengmian" style="display: none;"/>
<img src="" />
$(function(){
$("#fengmian").change(function(){
var file = $(this).prop('files')[0];
uploadFile(file);
})
})
//上传文件
function uploadFile(file){
fileName = file.name;
var fileType = fileName.substr(fileName.lastIndexOf(".")).toUpperCase();
if (fileType == ".JPG" || fileType == ".PNG" ) {
var size = file.size;
if(size > 500000){//进行压缩
photoCompress(file,{"quality":0.2},function(imgBase64){
uploadImgBase64(imgBase64);
})
}else{
uploadImg(file);
}
}else{
alert("封面、简介仅限于jpg或png格式的图片");
return false;
}
}
2、使用base64或者file上传
//file上传文件
function uploadImg(file){
var formData = new FormData();
formData.append("file",file);
$.ajax({
url:"${ctx}/upload/uploadFile",
data:formData,
type:"post",
dataType:"json",
processData: false,
contentType: false,
success:function(data){
if(data.success == true){
var windowURL = window.URL || window.webkitURL;
var dataURL;
dataURL = windowURL.createObjectURL(file);
$("src").attr("src",dataURL);
$("#"+objId).val(data.msg);
}else{
alert("图片信息有误");
}
},error:function(){
alert("信息有误");
}
})
}
//base64上传文件
function uploadImgBase64(base64){
$.ajax({
url:"/Share/base64/base64",
data:{"base64":base64},
type:"post",
dataType:"json",
success:function(data){
if(data.success == true){
var base64Url = data.body.url;
$("src").attr("src",base64);
$("#"+picCoverUrl).val(base64Url);
alert("上传成功");
}else{
alert("信息有误");
}
},error:function(){
alert("信息有误");
}
})
}
图片压缩
- 图片前台压缩
1、上传速度加快
2、减少对服务器的压力
- 图片后台压缩
1、图片前台压缩
1、读取文件
<label for="fengmian" class="btn btn-success btn-xs">上传封面</label>
<input type="file" id="fengmian" style="display: none;"/>
$(function(){
$("#fengmian").change(function(){
var file = $(this).prop('files')[0];
photoCompress(file,function(image64){
$("img").attr("src",image64);
})
})
})
//file 图片
//callBack 回调函数
function photoCompress(file,callBack){
//读取文件
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(){
var re = this.result;
compress(re,callBack);
}
}
2、压缩文件
//使用canvas重置图像
function canvasDataURL(path, obj, callback){
var img = new Image();
img.src = path;
img.onload = function(){
var that = this;
// 默认按比例压缩
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality = 0.7; // 默认图片质量为0.7
//生成canvas
var canvas = document.createElement('canvas');
//二维图
var ctx = canvas.getContext('2d');
// 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
// 图像质量
if(obj.quality && obj.quality <= 1 && obj.quality > 0){
quality = obj.quality;
}
// quality值越小,所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality);
// 回调函数返回base64的值
callback(base64);
}
}
2、图片后台压缩
1、导入jar包
<dependency>
<groupId>net.coobird</groupId>
<artifactId>thumbnailator</artifactId>
<version>0.4.8</version>
</dependency>
2、使用Thumbnails
Thumbnails.of(file.getInputStream()).scale(1f)
.outputQuality(1f).toFile(path);
备注:
- scale修改大小
- outputQuality修改质量
上传文件后台处理
1、通过流上传
/**
* 通过流上传文件
*
* @param file 上传文件
* @param path 绝对路径
* @return
*/
public static Map<String, Object> uploadFileByInput(MultipartFile file,
String path) {
Map<String, Object> map = new HashMap<String, Object>();
map.put("success", false);
try {
InputStream input = file.getInputStream();
// 创建一个文件输出流
FileOutputStream out = new FileOutputStream(path);
// 创建一个缓冲区
byte buffer[] = new byte[1024];
// 判断输入流中的数据是否已经读完的标识
int len = 0;
// 循环将输入流读入到缓冲区当中,(len=in.read(buffer))>0就表示in里面还有数据
while ((len = input.read(buffer)) > 0) {
out.write(buffer, 0, len);
}
input.close();
// 关闭输出流
out.close();
map.put("success", true);
} catch (Exception e) {
System.out.println(e.getMessage());
}
return map;
}
2、通过transferTo
/**
* 上传文件
*
* @param file
* @param path
* 绝对路径
* @return
*/
public static Map<String, Object> uploadFile(MultipartFile file,
String path) {
Map<String, Object> map = new HashMap<String, Object>();
map.put("success", false);
try {
File newFile = new File(path);
File parentFile = newFile.getParentFile();
if (!parentFile.exists()) {
parentFile.mkdirs();
}
String fileName = file.getOriginalFilename();
String fileType = fileName.substring(fileName.lastIndexOf("."))
.toUpperCase();
Long size = file.getSize();
if (imgType.contains(fileType) && imgSize < size) {
Thumbnails.of(file.getInputStream()).scale(1f)
.outputQuality(1f).toFile(path);
} else {
file.transferTo(newFile);
}
map.put("success", true);
} catch (Exception e) {
System.out.println(e.getMessage());
}
return map;
}
参考文章
上传前压缩 https://blog.csdn.net/qq_42213965/article/details/98616030
https://blog.csdn.net/Clara_G/article/details/87936853
FileReader https://blog.csdn.net/lucky541788/article/details/86675495
https://www.jb51.net/article/135767.htm
Thumbnails详解 https://blog.csdn.net/qq_25508039/article/details/82257436