-
對於異步上傳來說,如果仍想用文件直接上傳方法的話,可以採用HTML5的
FormData
,具體操作可以參考這篇博客。http://www.cnblogs.com/lhb25/... -
本人還有另外一種異步上傳圖片的方法。先將圖片轉換成base64字符串,然後再把base64字符串提交到服務器上,服務器接收後,可以再用具體的API將base64字符串轉換成圖片內容。以下爲具體實現方法:
var getObjectURL = function(file) {
var url = null;
if (window.createObjectURL !== undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL !== undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL !== undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
getObjectURL
方法用於將傳入的input中的圖片file對象,轉換成一個臨時的url,而這個url是同域的。
var converImgTobase64 = function(url, callback, outputFormat) {
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'),
img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function(){
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img,0,0);
var dataURL = canvas.toDataURL(outputFormat || 'image/png');
callback.call(this, dataURL);
canvas = null;
};
img.src = url;
}
converImgTobase64
方法就是將上面所得到的url傳入,通過canvasAPI轉換成base64字符串,注意這個url必須是同域的,不可跨域,所以getObjectURL
這個方法是很有必要的。
例子:
var input = $("input[type=file]")[0],
src = getObjectURL(input.files[0]);
converImgTobase64(src, function(base64Str) {
//處理base64Str相關的callback,可以直接在這裏發送ajax請求。
});
這部分組件的代碼在本人的一個util庫中,歡迎參考並提出整改意見~~~https://github.com/zero-mo/Br...
另外,圖片壓縮的話,這裏有一個是基於canvas
進行操作的,你可以試一下。
http://www.cnblogs.com/xiao-y...