github下載地址點我
demo
<input type="file" name="imgFile" id="topFile" accept="image/gif,image/jpeg,image/jpg,image/png">
<script type="text/javascript">
$(function() {
//檢測手機系統
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數據轉換為Blob
* @param urlData
*/
function convertBase64UrlToBlob(urlData){
//去掉url的頭,并轉換為byte
var bytes=window.atob(urlData.split(',')[1]);
//處理異常,將ascii碼小于0的轉換為大于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>
后臺代碼
public String uploadImg(@RequestParam(value="photofile",required=false) MultipartFile file){
//上傳file
}
最后編輯于 :
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。