js多种方式实现图片预览

最新推荐文章于 2024-06-25 13:13:22 发布

独行侠梦

最新推荐文章于 2024-06-25 13:13:22 发布

阅读量499

点赞数

分类专栏：网页html-css 文章标签： javascript

本文链接：https://blog.csdn.net/u012811805/article/details/53575699

版权

网页html-css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

先贴代码，明天完善

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>js多种方式图片预览-持续更新</title>
 </head>
 <body>
 <body>  
  <input type="file" id="file" value="选择" accept="image/*">
  <div style="width:200px;height:200px;border:1px solid #ccc">
    <img id="img_show"  src="" />
  </div>

 </body>
 <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
 <script type="text/javascript">
    //设置自己的变量存储区


    var Util = {
         file : $("#file"),
         image_show:$("#img_show")
    }

    console.log(Util.file);
    //input.addEventListener('change',readFile,false); 

   Util.file.change(function(){
        if(this.files[0].type.indexOf('image')<0){
            alert("请选择图片文件!");
            return; 
        }

        if(this.files[0].size/1024 > 5*1024){
            alert("图片过大，请选择5M以下的文件");
            return;
        }

        if(typeof FileReader=='undefined'){//如果支持,typeOf返回的也是 Function,safari浏览器不支持
            alert("您的浏览器不支持html5 fileReader请更换浏览器重试!");
            return;
        }else{
          var reader = new FileReader();
          reader.readAsDataURL(this.files[0]);//这里传的是一个blob ，其实file对象就是继承自bolob
          reader.onload = function(e){
          console.log( Util.image_show.src);//这里拿到的是一个base64编码后的图片
          Util.image_show.attr("src",this.result);
        };

        }
    });

    </script>
</html>