图片上传，传递BASE64字符，现在手机像素很高，拍出来的图片都是至少好几M内存，不压缩就转换BASE64，将会出现超时等一系列问题，下文是内存大于多少的进行压缩，可控制
<div class="upload">
<img src="${ctx}/resources/img/dzjkk/upload.png" class="upload-image" id="img_area">
<input type="file" accept="image/*" class="upload-input" name="img" id="img_upload" />
<textarea id="base64_code" rows="30" cols="360" style="display: none;"></textarea>
</div>
<script type="text/javascript">
window.onload = function() {
// 抓取上传图片，转换代码结果，显示图片的dom
var img_upload = document.getElementById("img_upload");
var base64_code = document.getElementById("base64_code");
var img_area = document.getElementById("img_area");
// 添加功能出发监听事件
img_upload.addEventListener('change', readFile, false);
}
//file，最大值
function ImgToBase64(file, maxLen, callBack) {
var img = new Image();
var reader = new FileReader();//读取客户端上的文件
reader.onload = function () {
var url = reader.result;//读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的.所以必须使用reader.onload，
img.src = url;//reader读取的文件内容是base64,利用这个url就能实现上传前预览图片
};
img.onload = function () {
//生成比例
var width = img.width, height = img.height;
//计算缩放比例
var rate = 1;
if (width >= height) {
if (width > maxLen) {
rate = maxLen / width;
}
} else {
if (height > maxLen) {
rate = maxLen / height;
}
};
img.width = width * rate;
img.height = height * rate;
//生成canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
var base64 = canvas.toDataURL('image/jpeg', 0.7);
callBack(base64);
};
reader.readAsDataURL(file);
}
//调用
function readFile() {
var file = this.files[0];
if(!/image\/\w+/.test(file.type)) {
alert("请确保文件为图像类型");
return false;
}
ImgToBase64(file, 680, function (base64) {
//直接利用ajax上传base64到服务器，完毕
base64_code.innerHTML = base64;
//img_area.innerHTML = '<div>图片img标签展示：</div><img src="' + this.result + '" alt=""/>';
document.getElementById('img_area').src=''+base64;
shadeLoading(true);
//base64数据
var imgData = base64;
//接口调用，比如说ajax
});
}
