js多种方式实现图片预览

来源：互联网发布：大型公司网络组建编辑：程序博客网时间：2024/05/24 01:41
先贴代码，明天完善
<!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>
0 0