JS实现图片预览

HTML

 

<!-- —————————————————————————————————————————————————上传图—————————————————————————————————————————————————————————————————————— -->
<div class="panel-body">
    <input type="hidden" id="formId" name="id" >
    <input type="hidden" id="formAssetNumber" name="assetNumber" >
    <div class="col-md-12 column alreadyExit">
        <label for="upload" id="lableUpload" class="btn btn-default btn-block">上传图片</label>
        <input id="upload" name="file" type="file" style="display:none" accept="image/*;">
    </div>
    <div class="col-md-12 column submit" style="position:relative;text-align: center;">
        <img  class="img_wrap" style="display: none;" >
    </div>
</div>

JS

 

$(function (){
     //图片上传触发事件
    $("#upload").change(function(){
        var reader = new FileReader();
        //文件读取成功完成时触发
        reader.onload = function (e) {
            compress(this.result);
        };
        //将文件读取为 DataURL
        reader.readAsDataURL(this.files[0]);
        
    });
});

//设置图片大小，显示图片
function  compress(res) {
    //创建img对象，定义图片高度
    var img = new Image(),
        maxW = 1060;
    //图片加载完成后
    img.onload = function () {
        var cvs = document.createElement('canvas'),
            ctx = cvs.getContext('2d');
        if(img.width > maxW) {
        	img.height *= maxW / img.width;
            img.width = maxW;
        }
        cvs.width = img.width;
        cvs.height = img.height;
        //清除图片
        ctx.clearRect(0, 0, cvs.width, cvs.height);
        //绘制图片
        ctx.drawImage(img, 0, 0, img.width, img.height);
        //获取图片base64_encode
        var dataUrl = cvs.toDataURL();
        //显示图片
        $(".img_wrap").attr("src",dataUrl);
        $(".img_wrap").show();
    };
    img.src = res;
}