window.onload = function(){
var imagesfile = document.getElementById("imagesfile");
imagesfile.onchange = function (){
var file = imagesfile.files[0];
//判断文件大小不能超过10M ,免去服务器的压力。
if (file.size > 10 * 1024 * 1024) {
alert("上传文件必须 < 10Mb!");
return false;
}
// 获取文件
var reader = new FileReader(); // 实例化
reader.readAsDataURL(file); // 加载
reader.onload = function (){ // 异步加载完成
console.log(reader);
var base64 = reader.result; // 获取 base64 DataURL
var imgDom = document.getElementById("imgtmp");
imgDom.src = base64;
/*imgDom.onload = function () {
//压缩
var canvas = document.createElement('canvas'); // 获取canvas对象
var context = canvas.getContext('2d'); // 获取canvas的上下文
canvas.width = 100;
canvas.height = 100;
context.clearRect(0, 0, canvas.width, canvas.height); // 首先先清空canvas里面的内容,以防内容叠加
context.drawImage(imgDom, 0, 0, canvas.width, canvas.height); // 画图
var base64min = canvas.toDataURL('image/jpeg', 0.92); // 格式和质量
imgDom.src = base64min;
//直接上传图片
//base64_uploading(base64min);
}*/
}
}
}
$('#sub_btn').on('click',function(){
var base64Data = $('#imgtmp').attr('src');
base64_uploading(base64Data);
})
//AJAX上传base64
function base64_uploading(base64Data){
var param1 = '其他参数'; // 可以同时传其他参数
var uploadimg = dataURLtoBlob(base64Data); // base64转二进制数据流
var formData = new FormData(); // 实例化创建form表单
formData.append("uploadimg", uploadimg); // 增加参数
formData.append("param1", param1);// 增加参数
// 执行ajax提交
$.ajax({
url:'upload.php',
dataType:'json',
type:'POST',
async: false,
data: formData,
processData : false, // 使数据不做处理
contentType : false, // 不要设置Content-Type请求头
success: function(data){
console.log(data);
if(data.code == 10000){
alert('上传成功');
}else{
alert('上传失败:'+data.msg);
}
},
error:function(response){
console.log('网络异常:'+response);
}
});
}
//**dataURL to 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 });
}