我们经常看到图片上传之后有预览,而一般的表单上传组件是获取不到文件真实路径的,那么如何实现,当然可以配合后端,存储之后再进行显示,这样不免会浪费资源。当然也有使用createObjectURL()方法的,也有使用html5的FileReader()的。都可以实现同样的功能。
今天我们讲的是用canvas配合FileReader()来实现该效果
本人测试兼容性方面不是很好,在一些安卓机了也有bug,并且对于较大图片也不建议使用,所以这里只做实例讲解之用,不建议使用在项目上
有人说你既然用FileReader()为什么要用canvas,不是多此一举
我们发现在FileReader()实际填充的是图形base64编码,是网页一下变的很大,当然用户也看不到哈,不过我就是不舒服怎么啦!o(∩_∩)o 哈哈
上传的dom结构不解释了,就一个现实图片框,和一个上传按钮,直接上代码
<div class="box"> <canvas id="cvs" width="200" height="200"> </canvas> <span class="btn upload"> 上传图片 <input type="file" class="upload_pic" id="upload"> </span> </div>
加上点css样式
.box{ width: 300px; height: auto; overflow: hidden; margin: 20px auto; color: #FFFFFF; } .box .btn{ width: 100%; height: 40px; line-height: 40px; text-align: center; background: #45B6F7; display: block; font-size: 16px; border-radius: 5px; } .upload{ float: left; position: relative; } .upload_pic{ display: block; width: 100%; height: 40px; position: absolute; left: 0; top: 0; opacity: 0; border-radius: 5px; } #cvs{ border: 1px solid #000; margin:20px 0 20px 50px; }
得到如图所示结构:
JS部分先贴出代码,再进行讲解,我尽量把代码注释写的详尽一些
//获取上传按钮 var input = document.getElementById("upload"); //判断一下浏览器支不支持FileReader"; if(typeof FileReader==='undefined'){ input.setAttribute('disabled','disabled'); }else{ input.addEventListener('change',readFile,false); } function readFile(){ var file = this.files[0];//获取上传文件列表中第一个文件 if(!/image\/\w+/.test(file.type)){ //file.type获取的是文件的MIME媒体类型,不知道的可以去查询了解,就知道为何用正则这么判断了 alert("文件必须为图片!"); return false; } var reader = new FileReader();//实例一个文件对象 reader.readAsDataURL(file);//把上传的文件转换成url //当文件读取成功便可以调取上传的接口 reader.onload = function(e){ //console.log(e.target.result); //打印出来可以看到是图片base64编码,稍微操作一下就可以填充页面或存储了,我们忽略,且往下看 //实例image对象 var image = new Image(); // 设置src属性 image.src = e.target.result; // 绑定load事件处理器,加载完成后执行,避免同步问题 image.onload = function(){ // 获取 canvas DOM 对象 var canvas = document.getElementById("cvs"); // 获取 canvas的 2d 环境对象, var ctx = canvas.getContext("2d"); // canvas清屏 ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(image, 0, 0, canvas.width, canvas.height); // 我们看源码可以看到image并没有加入到dom之中 }; } };
上面的代码上我都写上了具体的注释
说一下大家可能不理解的几个点
typeof//判断参数类型,这里用来判断浏览器是否支持 file.type;//获取的是文件的MIME媒体类型,之后用正则去判断是否为图片 FileReader();//对象,用于将文件内容读入内存 readAsDataURL();//将文件转成base64字符串 image.onload();//防止加载没结束就开始写入 clearRect(x,y,width,height);//四个参数,清理画布 drawImage(img,x,y,width,height);//五个参数,第一个要写入的图像,后面的是坐标以及宽高
本文由站长资源原创首发,转载请注明出处
评论前必须登录!
注册