input 框上传单张图片上传形成缩略图，并限制上传图片的大小

html 代码

<div class="upload_right fl File_1_up">
                        <div class="upload_upimg">
                               <img id="img_preview" data-src="" src="img/tianjia.png" data-holder-rendered="true">
                        </div>    
                        <input type="file" name="accreditfile" class="form-control" id="zx_img" style="padding: 0px;" placeholder="上传文件" value="">
 </div>

 

js 代码

 $("#zx_img").change(function (e) {
        //获取目标文件
        file = e.target.files || e.dataTransfer.files;
        console.log(file);
        //获取上传图片的大小
        Max_size=file[0].size;
        // alert(Max_size);
        //图片预览图展示
        if (file) {
            //定义一个文件阅读器
            var reader = new FileReader();
            //文件装载后将其显示在图片预览里
            reader.onload = function () {
                $("#img_preview").attr("src", this.result);
            }
            //装载文件
            reader.readAsDataURL(file[0]);
        }
    });

//判断上传图片的大小

if(Max_size>1024*1024*2){
             alert("图片超过2兆，请压缩后上传");
             return;

  }