JS多张图片压缩上传
- 前言
- 代码
- 结尾
前言
最近在做的项目里有个关于多图片上传的，搞得我很久，查了很多资料，终于搞定，故此写一篇总结。
代码
前台我用的是jquery-1.8.3.min.js
html：
<div id="inputBox"><input type="file" title="请选择图片" id="file" multiple accept="image/png,image/jpg,image/gif,image/JPEG" onchange="addPhoto()"/>点击选择图片</div>
<div id="imgBox"></div>js：
因为上传的图片要求不限制大小，就用了canvas压缩，再将base64转换为file放入文件流imgFile字段中，涉及到IE兼容问题就用了先将base64转换为blob再将blob转换为file。其中addNewContent方法实现预览效果，删除方法中的ajax会在下文提及。
var imgSrc = []; //图片路径
var imgFile = []; //文件流
var imgName = []; //图片名字
//压缩图片方法
function compressImg(file){
var src;
var fileSize = parseFloat(parseInt(file['size'])/1024/1024).toFixed(2);
var read = new FileReader();
read.readAsDataURL(file);
read.onload = function (e) {
var img = new Image();
img.src = e.target.result;
img.onload = function(){
//默认按比例压缩
var w = this.width,
h = this.height;
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var base64;
// 创建属性节点
canvas.setAttribute("width", w);
canvas.setAttribute("height", h);
ctx.drawImage(this, 0, 0, w, h);
if(fileSize<1){
console.log("1");
//如果图片小于一兆 那么不执行压缩操作
base64 = canvas.toDataURL(file['type'], 1);
}else if(fileSize>1&&fileSize<2){
console.log("0.5");
//如果图片大于1M并且小于2M 那么压缩0.5
base64 = canvas.toDataURL(file['type'], 0.5);
}else{
console.log("0.2");
//如果图片超过2m 那么压缩0.2
base64 = canvas.toDataURL(file['type'], 0.2);
}
// 回调函数返回file的值
// callback(base64);
var blob = dataURLtoBlob(base64);
var files = blobToFile(blob, imgName);
imgFile.push(files);
};
};
};
//将base64转换为blob
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
};
//将blob转换为file
function blobToFile(theBlob, fileName){
theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;
return theBlob;
}
function addPhoto() {
var fileImg = $("#file")[0];
var fileList = fileImg.files;
for(var i = 0; i < fileList.length; i++) {
var imgSrcI = getObjectURL(fileList[i]);
imgName.push(fileList[i].name);
imgSrc.push(imgSrcI);
compressImg(fileList[i]);
}
addNewContent("#imgBox");
}
function addNewContent(obj) {
$("#imgBox").html("");
for(var a = 0; a < imgSrc.length; a++) {
var oldBox = $(obj).html();
$(obj).html(oldBox + '<div class="imgContainer"><img title=' + imgName[a] + ' alt=' + imgName[a] + ' src=' + imgSrc[a] + ' οnclick="imgDisplay(this)"><p οnclick="removeImg(this,' + a + ')" class="imgDelete">删除</p></div>');
}
}
//删除
function removeImg(obj, index) {
console.log("imgSrc="+imgSrc.length);
console.log("imgFile="+imgFile.length);
console.log("imgName="+imgName.length);
if(imgFile[index]==""){
console.log("id="+imgName);
var id = imgName[index];
$.ajax({
type: "post",
url: "<%=request.getContextPath()%>/member/trade/doDelPicture.html",
dataType: "json",
data: {id: id},
success: function (data) {
if(data==0){
console.log("删除成功！id："+id);
}
}
});
}
imgSrc.splice(index, 1);
imgFile.splice(index, 1);
imgName.splice(index, 1);
var boxId = "#" + $(obj).parent('.imgContainer').parent().attr("id");
addNewContent(boxId);
}
//限制图片个数
function limitNum(num){
if(!num){
return true;
}else if(imgFile.length>num){
return false;
}else{
return true;
}
}
//图片灯箱
function imgDisplay(obj) {
var src = $(obj).attr("src");
var imgHtml = '<div style="width: 100%;height: 100vh;overflow: auto;background: rgba(0,0,0,0.5);text-align: center;position: fixed;top: 0;left: 0;z-index: 1000;"><img src=' + src + ' style="margin-top: 100px;width: 70%;margin-bottom: 100px;"/><p style="font-size: 50px;position: fixed;top: 30px;right: 30px;color: white;cursor: pointer;" οnclick="closePicture(this)">×</p></div>'
$('body').append(imgHtml);
}
//关闭
function closePicture(obj) {
$(obj).parent("div").remove();
}
//图片预览路径
function getObjectURL(file) {
var url = null;
if(window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if(window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if(window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}在写上传前，先写初始时就有几张图片需要显示的情况。该情况需要将后台的图片在前台显示：
@RequestMapping(value = "/member/trade/viewPhoto")
@ResponseBody
public void viewPhoto(HttpServletRequest request, HttpServletResponse response) throws IOException {
String id = request.getParameter("id"); //前端传来的图片id
byte[] bookPicture = deliveryOrderService.findPicture(id); //获得bookPicture
response.setContentType("image/jpeg"); //设置图片格式
OutputStream out = response.getOutputStream(); //打开输出流
if(bookPicture!=null){
out.write(bookPicture); //输出图片
}
out.flush(); //输出
out.close(); //关闭输出
}前台初始化：
member/trade/getPhotoId为获取图片ID的ajax调用，这里就不多赘述。注意：这里获取到的只是图片的src路径，没有文件流，所以imgFile.push("");也因此删除图片时要判断图片是否是后台传来的图片if(imgFile[index]=="")，如果是后台传来的图片就需要调用一下后台，将后台的图片一并删除
$(function(){
var id = $("[name=id]").val();
var contextPath = $("[name=contextPath]").val();
$.ajax({
type: "post",
url: "<%=request.getContextPath()%>/member/trade/getPhotoId.html",
dataType: "json",
data: {id: id},
success: function (data) {
data = eval（data);
var msg = data.message;
var basePath = data.result;
$.each(msg, function (n, value) {
console.log(n + '---' + value);
var src = basePath+"member/trade/viewPhoto.html?id="+value;
imgName.push(value);
imgSrc.push(src);
imgFile.push("");
console.log(imgSrc);
});
addNewContent("#imgBox");
}
});
})也因此在做上传时只需要一起上传前台上传的图片，也就是imgFile文件流：注意文件上传的form便签<form id="addPickgoodsMain" method="post" enctype="multipart/form-data">
function doSubmit(state){
if(imgFile.length==0&&state==2 ){
alert("请选择上传的文件!");
return ;
}
if(!limitNum(100)){
alert("超过图片上传限制");
return;
}
if (!window.confirm('确定执行此操作吗?')) {
return;
}
var formData = new FormData(document.getElementById('addPickgoodsMain'));
var param=$("#addPickgoodsMain").serializeJson();
param = JSON.stringify(param);
console.log(param);
formData.append("param",param);
for(var i=0;i<imgFile.length;i++){
formData.append("file1"+i+"[]",imgFile[i]);
}
$.ajax({
type: "POST",
url: "<%=request.getContextPath()%>/member/trade/orderEdit_signature.html",
data: formData,
async : false,
contentType: false,
processData: false,
success: function(data) {
if(data == '0') {
alert("操作成功！")
}else{
alert("操作失败！")
}
}
});
}后台接收用到CommonsMultipartResolver来获取请求中的文件流：
public void doAttchmentSave(HttpServletRequest request) throws IOException {
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
//判断 request 是否有文件上传,即多部分请求
if (multipartResolver.isMultipart(request)) {
//转换成多部分request
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
//取得request中的所有文件名
Iterator<String> iter = multiRequest.getFileNames();
while (iter.hasNext()) {
//取得上传文件
MultipartFile file = multiRequest.getFile(iter.next());
if(file != null){
//取得当前上传文件的文件名称
String myFileName = file.getOriginalFilename();
//如果名称不为空,说明该文件存在，否则说明该文件不存在
if(!"".equals(myFileName.trim())){
/**这里进行文件处理！！！*/
}
}
}
}
}结尾
到此，功能就结束了，第一次写博客，有什么不对的地方欢迎指出。希望对大家有用~~~~
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
