上傳頭像插件megapix-image.js

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
}
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容