html代码:
<input id="file" type="file" name="filesName">
js代码:
var fileElement = document.getElementById('file');
fileElement.onchange = function(){
var file = event.target.files[0];
var upload = new uploadThumbnail({
// name:"imgFileName", //缺省为 'imgs'
// formName:"formName", //缺省为 'forms'
// max:[maxWidth,maxHeight], //缺省为 [400*400]
file:file,
url:"./thumbnail.php",
dataType:"json", //缺省为 'text'
success:function( data ){
console.info( data ); //打印接收的数据
//this.newImgObj 为压缩后的图片对象
document.body.append( this.newImgObj ) // 将图片加入页面
}
});
upload.explain(); //在控制台打印说明
}
uploadThumbnail 对象:
(function(win,undefined){
'use strict'
var uploadThumbnail = function( obj ){
this.newImgObj = null;
this.init( obj );
this.success = obj.success || function () {};
}
uploadThumbnail.prototype = {
constructor:uploadThumbnail,
// 入口函数
init:function( obj ){
this.compressPictures( obj );
},
// 压缩图片 并将画布传入上传函数
compressPictures:function( obj ){
obj = obj || {};
obj.file = obj.file || "undefined";
obj.url = obj.url || "undefined";
var objThis = this;
if( obj.file == "undefined" || obj.url == "undefined" ){
console.info( "uploadThumbnail: 'file' and 'url' are required" );
return false
};
// 压缩图片需要的一些元素和对象
var reader = new FileReader(), newImg = new Image();
// 缩放图片需要的canvas
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( '2d' );
if ( obj.file.type.indexOf( "image" )==0 ) {
reader.readAsDataURL( obj.file );
// 文件base64化，以便获知图片原始尺寸
reader.onload = function( e ) {
newImg.src = e.target.result;
// base64地址图片加载完毕后
newImg.onload = function () {
// 图片原始尺寸
var originWidth = this.width;
var originHeight = this.height;
// 最大尺寸限制
var maxWidth, maxHeight;
try{
maxWidth = obj.max[0];
maxHeight = obj.max[1];
}catch( err ){
maxWidth = 400;
maxHeight = 400;
}
// 目标尺寸
var targetWidth = originWidth, targetHeight = originHeight;
// 图片尺寸超过400x400的限制
if ( originWidth > maxWidth || originHeight > maxHeight ) {
if ( originWidth / originHeight > maxWidth / maxHeight ) {
// 更宽，按照宽度限定尺寸
targetWidth = maxWidth;
targetHeight = Math.round( maxWidth * ( originHeight / originWidth ) );
} else {
targetHeight = maxHeight;
targetWidth = Math.round( maxHeight * ( originWidth / originHeight ) );
}
}
// canvas对图片进行缩放
canvas.width = targetWidth;
canvas.height = targetHeight;
// 清除画布
context.clearRect( 0,0,targetWidth,targetHeight );
// 图片压缩
context.drawImage( newImg,0,0,targetWidth,targetHeight);
// 完成画布传入上传
objThis.upFile( obj,canvas );
};
};
}else{
return false;
}
},
upFile:function( obj,canvas ){
var objThis = this;
// canvas转为blob并上传
canvas.toBlob(
function (blob) {
// 生成图片
var newImg = document.createElement("img"),
url = URL.createObjectURL(blob);
newImg.onload = function() {
URL.revokeObjectURL(url);
};
obj.img == true
? newImg.src = canvas.toDataURL()
: newImg.src = url;
objThis.newImgObj = newImg;
// 创建表单数据
var formData = new FormData();
formData.append( obj.formName || 'forms',blob,obj.name || 'imgs' );
// 图片上传
var request = new XMLHttpRequest();
// obj.async ? obj.async = true : obj.async = false;
request.open( "POST",obj.url,true );
request.send( formData );
request.onreadystatechange = function() {
if ( request.readyState == 4 && request.status == 200 ) {
if( obj.dataType=="JSON" || obj.dataType=="json" ){
try{
objThis.success( JSON.parse(request.responseText) )
}catch( err ){
console.info( "banfeng reminds you: Error in converting received data to 'JSON' format" )
}
}else{
objThis.success( request.responseText )
}
}
};
},
obj.file.type || 'image/png',
);
},
explain:function(){
console.group( "This is uploadThumbnail" );
console.log( 'new uploadThumbnail({' +
'\n\tname:imgFileName || "imgs",' +
'\n\tformName:formName || "forms",' +
'\n\tmax:[maxWidth,maxHeight] || [ 400*400 ],' +
'\n\tfile:inputFile,' +
'\n\turl:URL,' +
'\n\tdataType:"json" || "text"' +
'\n\tsuccess:functon(data){} Callback function on success' +
'\n});' +
"\nobj.newImgObj:Compressed image object" )
console.groupEnd();
}
}
win.uploadThumbnail = uploadThumbnail;
}(window));