1.依赖 jquery.js
2.html部分
<input class="addImage" name="loadFile" type="file" accept="image/*" capture="camera">
//capture="camera" 设置手机端打开上传文件时使用手机摄像头拍照上传,不写则默认拍照或相册
3.js部分
//input上传图片
$('.addImage').on('change',function(){
//开始处理图片,此时可以做一些“图片上传中。。。”的提示等
var fileObj = this.files[0];
var fileName = fileObj.name;
//压缩,先旋转在压缩,因为cavers从画图压缩,压缩后的图片就没有角度等信息了
photoCompress(fileObj, {
quality: 0.2 //清晰度
}, function(base64Codes){
//旋转并且压缩后传回base64编码,此时可以用ajax与后端传输图片,此方法不做演示
//模拟表单提交
var form = new FormData(); // FormData 对象
var bl = convertBase64ToBlob(base64Codes); //base64转化为blob对象
form.append("loadFile", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象
xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
xhr.open("post","<../medicalAppointment/tempImg.do", true);
//xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
//请求完成执行uploadComplete
xhr.onload = function uploadComplete(evt){
var data = evt.target.responseText; //返回的数据data
console.log(data)
};
xhr.onerror = function uploadFailed(){}; //请求失败
xhr.send(form); //开始上传,发送form数据
})
})
//压缩后base64转化为blob
var convertBase64ToBlob = function(base64){
var base64Arr = base64.split(',');