zoukankan      html  css  js  c++  java
  • 图片上传前本地显示

    <input id="upload_id" type="file" name="photoimage" class=""  />

    <div id="picture_id" >
    <img src="" id="preview_id" style="max-100px;max-height:100px;">
    </div>

    $("#upload_id").on("change", function(){
            var f=document.getElementById('upload_id').files;
            console.log(f);
            if(f.length>0){
                if (!/^image/.test( f[0].type)){
                    console.log("图片格式不正确");//判断f的图片格式是什么
                    return;
                }
                if(f[0].size>1024*1024){
                    console.log("图片大小不能超过1M");//判断f的图片格式是什么
                    return;
                }
                $("#picture_id").show();
                var r= new FileReader();
                r.readAsDataURL(f[0]);
                r.onload=function (e) {
                    document.getElementById('preview_id').src=this.result;
                };
            }else{
                $("#picture_id").hide();
                document.getElementById('preview_id').src="";
            }
            
        });
  • 相关阅读:
    王道训练营-C语言-1
    错排问题
    王道训练营-C语言-1
    图文处理 生成海报
    根据经纬度按距离排序
    vue总结
    docker+consul
    doker es
    知识库
    php笔记
  • 原文地址:https://www.cnblogs.com/beimingbingpo/p/8657358.html
Copyright © 2011-2022 走看看