将图片转化为base64格式通过ajax传给后端

最近在做注册登录系统时，需要传图片给后端，因为native直接用的base64格式的。所以我们需要做的就是将用户上传的图片预览出来，同时转化为base64格式通过ajax传给后端。

废话不多说直接上代码

第一步，我们需要将input file的文件提取img标签可以识别的url。

//建立一個可存取到該file的url
function getObjectURL(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 ;
}

第二步，input的change事件，调用函数使得上传图片后实现预览功能

$("#upload").on("change",function(){
	var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
	if (objUrl) {
		$(".qq_bind_headImg").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
	}
});

第三步，通过ajax将图片传给后端,这里用到了FR

var file = document.getElementById('upload').files[0];
if (file) {
    var reader = new FileReader();
    reader.onload = function ( event ) {
        avatar = event.target.result;
	$.ajax({
            url: '...',
            cache:false,
            type: 'POST',
            data: {
		avatar: reader.result,
	    },
            dataType: 'json',
            success : function(rs){
				
            },
            error: function(e){
            }
        });
    };
	reader.readAsDataURL(file);
}

PS：如果不想使用FR方式，这里还提供了canvas方式转化

function imgSrcToBase64(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img,0,0,img.width,img.height);
    return canvas.toDataURL();
}

将图片转化为base64格式通过ajax传给后端

猜你喜欢