js上传照片，预览，压缩后base64编码发送后台，及将后台返回的base64图片显示到HTML

显示效果如下，点击上传，选择任意图片，压缩到设定的图片大小并显示，压缩后发送给后台。

HTML：

   *照片：
上传 


   
 

JS：

给上传按钮添加事件，激活被隐藏的file类型input控件，选择照片。

//上传照片
function uploadphoto()
{
	var fileDialog = $("#selectphoto");
    fileDialog.change(function(event){
		var filePath = $(this).val(),         //获取到input的value，里面是文件的路径  
            fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),  
            imgBase64 = '',      //存储图片的imgBase64  
            fileObj = document.getElementById("selectphoto").files[0]; //上传文件的对象,要这样写才行，用jquery写法获取不到对象  
            photoname = fileObj.name;//可以获取文件名称
        // 检查是否是图片  
        if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {  
            alert('上传错误,文件格式必须为：png/jpg/jpeg');  
            return;    
        }   
        // 调用函数，对图片进行压缩  
        compress(fileObj,function(imgBase64){  
            imgBase64 = imgBase64;    //存储转换的base64编码  
	    globalphoto = imgBase64; //可用于随其它信息一同ajax发送后台
            $("#viewImg").attr('src',imgBase64); //显示预览图片  
        }); 
    })
	 fileDialog.click();
}

压缩函数用于对图片进行压缩，根据实际布局情况设定画布宽、高之后，不管上传图片大小比例如何，都会按照设置值进行拉伸压缩，会出现图片拉伸或者剪裁的情况：

// 不对图片进行压缩，直接转成base64  
    function directTurnIntoBase64(fileObj,callback){  
        var r = new FileReader();  
        // 转成base64  
        r.onload = function(){  
           //变成字符串  
            imgBase64 = r.result;  
            console.log(imgBase64);  
            callback(imgBase64);  
        }  
        r.readAsDataURL(fileObj);    //转成Base64格式  
    }   
  
       // 对图片进行压缩  
    function compress(fileObj, callback) {   
        if ( typeof (FileReader) === 'undefined') {    
            console.log("当前浏览器内核不支持base64图标压缩");    
            //调用上传方式不压缩    
            directTurnIntoBase64(fileObj,callback);  
        } else {    
            try {      
                var reader = new FileReader();    
                reader.onload = function (e) {    
                    var image = $('');    
                    image.load(function(){    
                        width = 150,   //定义画布的大小，也就是图片压缩之后的像素，可根据实际布局设定大小
			height = 180, 
                        canvas = document.createElement('canvas'),   
                        context = canvas.getContext('2d'),  
                        imageWidth = 0,    //压缩图片的大小  
                        imageHeight = 0,   
                        offsetX = 0,   
                        offsetY = 0,  
                        data = '';   
  
                        canvas.width = width;    
                        canvas.height = height;   
                        context.clearRect(0, 0, width, height);     
  
                        if (this.width > this.height) {    
                            imageWidth = Math.round(width * this.width / this.height);    
                            imageHeight = height;    
                            offsetX = - Math.round((imageWidth - width) / 2);    
                        } else {    
                            imageHeight = Math.round(height * this.height / this.width);    
                            imageWidth = width;    
                            offsetY = - Math.round((imageHeight - height) / 2);    
                        }    
                        context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);    
                        var data = canvas.toDataURL('image/jpeg');    
                        //压缩完成执行回调    
                         callback(data);    
                    });    
                    image.attr('src', e.target.result);    
                };    
                reader.readAsDataURL(fileObj);    
            }catch(e){    
                console.log("压缩失败!");    
                //调用直接上传方式  不压缩   
                directTurnIntoBase64(fileObj,callback);   
            }    
        }  
}