HTML5有個功能就可以將圖片轉換base64，那就是FileReader。
同時我們也需要對圖片大小執行限制和壓縮,以達到最優狀態上傳到服務器
順便說下這個上傳的主要邏輯：
·用input標簽并選擇type=file，記得帶上multiple，不然就只能單選圖片了
·綁定好input的change時間，
·重點就是如何處理這個change事件了，使用H5新的FileReader接口讀取文件并打成base64編碼，之后的事就是與后端同學交互著玩啦
html
<input type="buttom" id="baseImg">
限制上傳圖片的格式
JS
在js方面我們進行組件的開發，也可以方便拿來就用。
$('#baseImg').bind('click tap',function(){
new Upload({
current:$(this)
callback:function(){
//自己的業務邏輯
}
})
})
js組件中
引入jquery.js
//定義入參
var Upload = function(config){
var newConfig = $.extend({},Upload.defualts,config);
this.init(newConfig)
}
Upload.defaults = {
imgOption:{
width:'',
height:'',
quality:''
}
current:'',
callBack:''
}
Upload.prototype = {
init:function(param){
var self = this,
_imgOption = param.imgOption,
_current = param.current,
_callBack = param.callBack;
if( typeof FileReader == 'underfined' ){
alert('該瀏覽器不值FileReader');
return;
}else if(navigator.userAgent.indexOf('MSIE 9.0') != -1 || navigator.userAgent.indexOf('MSIE 8.0') != -1){
alert('IE9 IE8不支持base64上傳');
return;
}
self.del(param) //刪除圖片
$('#changeFile').remove();
//刪除放在前面 刪除上一個的 不然某些瀏覽器會出現沒上傳完 就刪除了input 這個導致整個都失敗了
$(class).before('<input type="file" id="changeFile" name="file" accept="image/bmp,image/jpg,image/png" style="display:none"/>');
//通過click來觸發input 就出現了瀏覽器選擇框 但input始終都是隱藏的
$('#changeFile').click();
$('#changFile').bind('input protetychange,input'),function(){
changeImg(this)
})
function changImg(e){
if(!e.length.length)return;
var file = e.files[0];
reader = new FileReader();
reader.readAsDateURL(file);
reader.onload = function(){
var result = this.result,
img = new Image();
img.src = result;
getImgOption(img)
}
}
function getImgOption(img){
self.compress(img,_imgOption,function(base64){
//base64 就是轉成的base64 這里寫你在組件中的的業務邏輯
// console.log("壓縮前：" + result.length / 1024 + " " );
// console.log("壓縮后：" + base64.length / 1024 + " " );
//組件外的函數
if (_callBack) {
_callBack()
}
})
}
},
compress:function(img,obj){
img.onload = function(){
var self = this;
base64,imgSize = img.src.length/1024,
w = self.width,h = self.height, //顯示屏 scale = w / h,
quality,//圖片質量
canvas = document.createElement('canvas'),
ctx = canvas.getContext(2d),
anw = document.createAttribute('width'),
anh = document.createAttrabute('height');
w = obj.width || w;
h = obj.height || (w / scale);
anw.nodeVaule = w;
anh.ondeVaule = h;
canvas.setAttrbuteNode(anw);
cnavas.setAttrbuteNode(anh);
if( obj.quality == '' ){
if (imgSize < 50) {
_deal = false;
} else if (imgSize < 100 && imgSize > 50) {
obj.quality = 0.9;
} else if (imgSize < 500 && imgSize > 100) {
obj.quality = 0.8
} else if (imgSize < 1000 && imgSize > 500) {
obj.quality = 0.7
} else if (imgSize < 1000 && imgSize > 2000) {
obj.quality = 0.5
} else {
obj.quality = 0.4
}
}
quality = obj.quality;
base64 = canvas.toDateURL('image/jpeg',quality)
callback(base64);
}
},
del:function(){
var self = this;
//業務上的刪除圖片的邏輯
},
}；
return Upload;
Date: 2017-02-16
