input file上传图片本地预览

1. 定义上传控件

<input id="inputImg" type="file" accept="image/png,image/jpeg,image/jpg" onchange="changeFile(event)">

2. 本地图片预览

function changeFile(event) {
    var input = event.target;
    var file = input.files[0];
    var fr = new FileReader();
    fr.onload = function(){
        if(file.type !== ("image/png" || "image/jpg" || "image/jpeg")){
            alert('图片格式错误');
            return false;
        }else if(file.size > 1024 * 1024){
            alert('图片大小不超过1M');
            return false;
        }else{
            var dataURL = fr.result; // 图片base64
            console.log(dataURL);
        }
    };
    fr.readAsDataURL(file);
  };