本文只是经# 图片纯前端JS压缩的实现核心代码的简单修改后的多图片上传版本;
HTML
<div id="effect" class="part">
<h3>效果(400x400限制):</h3>
<div class="show">
<div class="demo">
<p><input id="file1" type="file" multiple="true" accept="image/gif, image/png, image/jpg, image/jpeg"></p>
<p id="log"></p>
</div>
<button id="upd" type="button" class="btn btn-secondary" >文件上传</button>
</div>
</div>
JS变量及辅助函数
var eleFile = document.querySelector('#file1');
// 压缩图片需要的一些元素和对象
var reader = new FileReader(), img = new Image();
// 缩放图片需要的canvas
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var mul_file = new Array();
var file_size = 0;
var blobs = new Array();
var time = 0;
var time_unit = 30;
function isInArray2(arr,value){
var index = $.inArray(value,arr);
if(index >= 0){
return true;
}
return false;
}
eleFile.addEventListener('change', function (event) {
mul_file = [];
blobs = [];
for (var i=0;i<event.target.files.length;i++)
{
mul_file.push(event.target.files[i]);
}
file_size = mul_file.length;
time = file_size * time_unit;
console.log("**file_size:"+file_size);
if (mul_file) {
[].forEach.call(mul_file, readAndPreview);
}
});
JS核心
function readAndPreview(file) {
// 确保 `file.name` 符合我们要求的扩展名
if (file.type.indexOf("image") == 0) {
var reader = new FileReader();
var image = new Image();
reader.onload = function(e) {
image.src = e.target.result;
};
reader.readAsDataURL(file);
image.onload = function(){
// 图片原始尺寸
var originWidth = this.width;
var originHeight = this.height;
// 最大尺寸限制
var maxWidth = 400, maxHeight = 400;
// 目标尺寸
var targetWidth = originWidth, targetHeight = originHeight;
// 图片尺寸超过400x400的限制
if (originWidth > maxWidth || originHeight > maxHeight) {
if (originWidth / originHeight > maxWidth / maxHeight) {
// 更宽,按照宽度限定尺寸
targetWidth = maxWidth;
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
} else {
targetHeight = maxHeight;
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
}
}
// canvas对图片进行缩放
canvas.width = targetWidth;
canvas.height = targetHeight;
// 清除画布
context.clearRect(0, 0, targetWidth, targetHeight);
// 图片压缩
context.drawImage(image, 0, 0, targetWidth, targetHeight);
// canvas转为blob并上传
canvas.toBlob(function (blob) {
if(!isInArray2(blobs,blob)){
blob.name = file.name;
blobs.push(blob);
console.log(blob);
}
}, file.type || 'image/png');
file_size--;
if(file_size === 0){
setTimeout(() => {
for(var j=0;j<blobs.length;j++){
var blob = blobs[j];
var img = document.createElement("img");
img.onload = function(e) {
window.URL.revokeObjectURL(img.src); // 清除释放
};
img.src = window.URL.createObjectURL(blob);
document.body.appendChild(img);
}
},time);
}
}
}
}
文件对象封装及上传触发
$('#upd').click(function (e) {
var formData = new FormData();
for(var i = 0;i<blobs.length;i++){
formData.append("file",blobs[i],blobs[i].name);
}
$.ajax({
url: "/uploadImg1",
data:formData,
type:'post',
contentType:false,
processData:false,
success:function(data) {
alert("Data Loaded: " + data);
}
});
})
后端数据接收解析及保存
@RequestMapping("/uploadImg1")
@ResponseBody
public String upload1(@RequestParam("file") MultipartFile[] files,Model model) {
if (files.length < 1) {
return "上传失败,请选择文件";
}
for (int i = 0; i < files.length; i++) {
MultipartFile file = files[i];
String fileName = file.getOriginalFilename();
File dest = null;
String os = System.getProperty("os.name");
if (os.toLowerCase().startsWith("win")) {
String path = "d:"+File.separator+"img"+File.separator;
dest= new File(path + fileName);
}else {
String path = "/webapps/img/";
dest= new File(path + fileName);
}
try {
file.transferTo(dest);
} catch (IOException e) {
return JSON.toJSONString("上传失败!");
}
}
return JSON.toJSONString("上传成功!");
}
网友评论