github下載地址點(diǎn)我
demo
<input type="file" name="imgFile" id="topFile" accept="image/gif,image/jpeg,image/jpg,image/png">
<script type="text/javascript">
$(function() {
//檢測手機(jī)系統(tǒng)
var ua = navigator.userAgent.toLowerCase();
if (/android/.test(ua)) {
$("#topFile").attr("capture", "camera");
}
$("#topFile").change(function() {
if (this.files && this.files[0]) {
var file = this.files[0];
var mpImg = new MegaPixImage(file);
var resImg = document.getElementById('topPhoto');
resImg.onload=function(){
if(resImg.src.indexOf("data:")==0){
var imgBase64=resImg.src;
sumitImageFile(imgBase64);
}
};
mpImg.render(resImg, { maxWidth: 500, maxHeight: 500, quality: 0.5 });
}
});
});
/**
* ajax上傳頭像
*/
function sumitImageFile(base64Codes){
var formData = new FormData();
formData.append("photofile",convertBase64UrlToBlob(base64Codes));
$.ajax({
url : "",
type : "POST",
data : formData,
dataType:"json",
processData : false,
contentType : false,
success:function(data){
if(!data.success){
alert(data.errInfo);
}
}
});
}
/**
* 將以base64的圖片url數(shù)據(jù)轉(zhuǎn)換為Blob
* @param urlData
*/
function convertBase64UrlToBlob(urlData){
//去掉url的頭，并轉(zhuǎn)換為byte
var bytes=window.atob(urlData.split(',')[1]);
//處理異常,將ascii碼小于0的轉(zhuǎn)換為大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob( [ab] , {type : 'image/png'});
}
</script>
后臺(tái)代碼
public String uploadImg(@RequestParam(value="photofile",required=false) MultipartFile file){
//上傳file
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
