使用lrz压缩上传图片，后台使用java

来源：互联网发布：单片机液晶广告屏实训编辑：程序博客网时间：2024/05/29 15:03

lrz的的github上的项目地址：https://github.com/think2011/localResizeIMG

github说明文档比较好

<%@ page language="java" contentType="text/html; charset=GBK"

pageEncoding="GBK"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">


<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/lrz/js//lrz.bundle.js"></script>

</head>
<body>
<div data-role="page" id="mainPage">
<div data-role="header" data-position="fixed">
<h1></h1>
</div>
<div data-role="content" class="page">
<div class="btns" id="showCertificate">
<span id="certificatePath" style="display: none;"></span>
<span id="certificate"> </span>
<input type="file" accept="image/jpg" name="file" id="uploadphoto"/>
<br />
</div>
</div>
</div>
<script type="text/javascript">

document.querySelector('input').addEventListener('change', function () {
var that = this;

lrz(that.files[0],{width:300})
.then(function (rst) {
var submitData={
image:rst.base64,
name:rst.origin.name,
fileLength:rst.base64.length
};
$.ajax({
type: "POST",
url: "http://localhost:8080/pacific/weixin/portal/upload/uploadImg2.do",
data: submitData,
dataType:"json",
beforeSend: function(XMLHttpRequest){
//showLoader();
},
success: function(data){

if ("1" == data.error) {
alert(data.message);
return false;
}else{
alert(data.thumbnail);

return false;
}
},
complete :function(XMLHttpRequest, textStatus){
hideLoader();
},
error:function(XMLHttpRequest, textStatus, errorThrown){ //上传失败
//hideLoader();
//alert('操作错误');
}
});
//alert(rst.base64);
return rst;
});
});

function showLoader() {
//显示加载器.for jQuery Mobile 1.2.0 以上
/* $.mobile.loading('show', {
text: '正在提交数据', //加载器中显示的文字
textVisible: true, //是否显示文字
theme: 'a', //加载器主题样式a-e
textonly: false, //是否只显示文字
html: "" //要显示的html内容，如图片等，默认使用Theme里的ajaxLoad图片
}); */
alert('正在上传');
}
function hideLoader()
{
//隐藏加载器
$.mobile.loading('hide');
}
</script>
</body>

</html>

上面是jsp页面，可直接使用，下面是服务端：

@RequestMapping("/uploadImg2")
public @ResponseBody
String uploadImg2(HttpServletRequest request) throws Exception {
String basePath = request.getRealPath("/upload_files");
// new一个文件对象用来保存图片，默认保存当前工程根目录
File imageFile = new File("D:/BeautyGirl5.png");

String resultStr=request.getParameter("image").toString();//前端传来的是压缩后的并用base64编码后的字符串
resultStr=resultStr.substring(resultStr.indexOf(",")+1);//需要去掉头部信息，这很重要
System.out.println(resultStr);
// 创建输出流
FileOutputStream outputStream = new FileOutputStream(imageFile);
// 获得一个图片文件流，我这里是从flex中传过来的
BASE64Decoder base64Decoder = new BASE64Decoder();
byte[] result = base64Decoder.decodeBuffer(resultStr);//解码
for (int i = 0; i < result.length; ++i) {
if (result[i] < 0) {// 调整异常数据
result[i] += 256;
}
}
outputStream.write(result);
outputStream.flush();
outputStream.close();
return "sc";
}

下面是lrz文件内容

0 0