专栏首页前端Q图片上传预览插件制作思路及Demo分享

图片上传预览插件制作思路及Demo分享

背景

其实,图片预览功能非常地常见。所以就动手做了一个小插件。在此分享一下思路。

实现图片预览的一些方法。

了解了一下,其实方法都是大同小异的。大概有以下几种方式:

  1. 订阅input[type=file]元素的onchange事件.

一旦选择的路径被改变就把图片上传至服务器,然后就返回图片在服务器端的地址,并且赋值到img元素上。

缺点:工作量大,有些上传并不是用户最终需要上传的图片,但是这种方式会把上传过程中选择过的图片都保存至服务器端,会造成资源浪费,而且服务器端清理临时的那些预览图片也需要一定的工作量。

  1. 利用HTML5的新特性FileReader。

这个对象提供了很多相关的方法,其中最主要用到readAsDataURL这个方法。点我了解更多。

缺点:通过FileReader的readAsDataURL方法获取的Data URI Scheme会生成一串很长的base64字符串,若图片较大那么字符串则更长,若页面出现reflow时则会导致性能下降。且浏览器支持情况不一致,支持的浏览器:FF3.6+,Chrome7+,IE10+。

  1. 使用window.URL.createObjectURL代替FileReader,再用DXImageTransform.Microsoft.AlphaImageLoader滤镜兼容IE。

缺点:由于IE11作了安全方面的考虑,使得在input[type=file]元素上通过value、outerHTML和getAttribute的方式都无法获取用户所选文件的真实地址,只能获取到

D:\frontEnd\文件名称。因此需使用document.selection.createRangeCollection方法来获取真实地址。

我的插件制作

我选择了比较保守的方法,就是第三种使用window.URL.createObjectURL代替FileReader,再用DXImageTransform.Microsoft.AlphaImageLoader滤镜兼容IE的方法啦。

  1. 第一步,HTML的布局
<div id="pic">
    <img id="preview" src="../imgs/default.jpeg">
</div>
<input type="file" id="uploadBtn" accept="image/*" onchange="setPreviewPic()">

是不是想说so easy?

  1. 第二步,插件js封装。

2.1 建立对象

我主要采用了组合继承的方式,封装了两个方法,分别是单张图片上传和多张图片上传。因为无论是单张图片上传还是单张图片上传,都需要传入、上传图片的input按钮、img标签、包裹着img的div、最大的单张照片的值,单位为KB。所以这四个参数在创建上传图片对象的时候就要传入。创建该对象的方法如下:

var SetPreviewPic=function(fileObj,preview,picWrap,maxImgSize){
    this.fileObj=fileObj;
    this.preview=preview;
    this.picWrap=picWrap;
    this.maxImgSize=maxImgSize;
}

2.2 定义匹配模式

因为是上传图片,除了在input里面加了accept="image/*",做了初步限制之外,还需要一个js的正则来通过路径的检测来判定是否为图片。所以在prototype上面定义该模式以供两个方法使用:

SetPreviewPic.prototype.pattern=new RegExp('\.(jpg|png|jpeg)+$','i');

2.3 定义方法

主要就是判断是否低于IE11的环境,编写两类方案。第一种就是直接通过改变img的src来预览图片,第二种就是在低版本的IE下,通过滤镜来达到预览效果。

FF、Chrome、IE11以上:(这里贴出多张图片预览的代码)

if(maxPics){
    if(this.fileObj.files && this.fileObj.files[0]){
       var imgs=this.picWrap.querySelectorAll('img'); //查找DOM里面已经有多少张图片了
       var num=imgs.length;
       var html=this.picWrap.innerHTML;
    if(Number(num)<Number(maxPics)){ //判断是否超过最大上传限度
         if(num==1&&(!imgs[0].classList.contains('newLoad'))){ //覆盖第一张默认图片
           html='';
         }
         if(this.pattern.test(fileObj.files[0].name)){
           if(judgeSize(fileObj.files[0].size/1024,this.maxImgSize)){//判断图片的大小是否超限
               html='<img class="newLoad" style="margin:5px;width:'+width+'px;height:'+height+'px;" src='+window.URL.createObjectURL(this.fileObj.files[0])+' />'+html;
               this.picWrap.innerHTML=html;
           }else{
               alert('你上传的图片太大!');
           }
         }else{
           alert('你上传的好像不是图片哦,请检查!');
         }
     }else{
       alert('每次最多上传'+maxPics+'张图片!');
     }
 }

IE11下利用滤镜达到效果:

        var nums=this.picWrap.childNodes.length;//因为IE6以下不支持querySelectorAll等方法,就通过childNodes的长度判断
 
        if(nums<maxPics+2){//这里加2是因为本来有一张默认的图片,而且childNodes读出来的长度会多1
            this.fileObj.select();
            if(document.selection){
                var imgSrc=document.selection.createRange().text;
 
                var image=new Image();
                image.src=imgSrc;
                filesize=image.fileSize;
                if(judgeSize(image.fileSize/1024,this.maxImgSize)){
 
        //IE下必须设置div的大小
        var ele=document.createElement('div');
        ele.style.width=width+'px';
        ele.style.height=height+'px';
        ele.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='"+imgSrc+"')";
 
        try{
            this.picWrap.appendChild(ele);
        }catch(e){
            alert('你上传的图片格式有误,请重新选择!');
            return false;
        }
        this.preview.style.display='none';
        document.selection.empty();
    }else{
        alert('你上传的图片太大!');
    }
}

至此,就完成啦!

用法:

<script type="text/javascript" src="../js/singlePic.js"></script>
<script>
    var fileObj=document.getElementById('uploadBtn');
    var preview=document.getElementById('preview');
    var picWrap=document.getElementById('pic');
    fileObj.onchange=function(){
        var obj=new SetPreviewPic(fileObj,preview,picWrap,100);
        //定义上传图片对象,参数分别为上传图片的input按钮、img标签包、裹着img的div、最大的单张照片的值,单位为KB
        obj.uploadSinglePic(200,250);//单张图片上传,参数分别为每张的宽度、高度
        // obj.uploadPics(200,250,2);  //多张图片上传,参数分别为每张的宽度、高度、最多上传张数
    }
</script>

缺点

这里有一个就是其实没办法判断客户端是否将不是图片的文件通过修改后缀名而作为图片来上传,这个只能通过服务器端来判断!

本文分享自微信公众号 - 前端Q(luckyWinty)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

推荐阅读

  • 日访问百万级微信小程序优化技巧总结

    之前负责的锡慧在线小程序是一款公益性质在线教育类小程序,因疫情影响导致流量暴增,日访问过百万

    薛定喵君
    小程序微信缓存RedisCanvas
  • Spiral: 一个性能卓越的PHP/Golang混合开发框架

    春节期间,了解到一个“全新”的 WEB 开发框架:Spiral, 最开始引起我的兴趣是从同事那里听说了 RoadRunner. 然后去了解 RoadRunner 的时候看到了 Spiral. 之所以把“全新”用双引号引起来,是因为这个框架其实从 2013 年起就在它的开发团队以及一些企业客户中应用了,经历了各种实际应用场景的考验,Spiral 的功能及其丰富,性能与当前主流的 PHP 框架相比也相当出众。但这个框架源自俄国,在国内不算知名,他们团队开始重视和梳理开源,也应该是才开始的事情。

    小李刀刀
    PHPGoSymfony
  • kubernetes系列教程(二十)prometheus提供完备监控系统

    上一个章节中kubernetes系列教程(十九)使用metric-server让HPA弹性伸缩愉快运行介绍了在kubernetes中的监控架构,通过安装和使用metric-server提供kubernetes中的核心监控指标:提供node节点和pod容器CPU和内存的监控能力,核心监控指标提供的监控维度和指标相对有限,需要更好的扩展监控能力,需要使用自定义监控来实现,本文介绍prometheus提供更更加丰富的自定义监控能力。

    HappyLau谈云计算
    Kubernetes容器微服务云监控
  • 如何将设计思维应用到精益初创公司的软件开发

    我们所说的设计思维,是指由 IDEO 公司的 Tim Brown 提出,并且正在改变全世界组织的设计思维,简称 DT。(译者注:IDDO,当代最具影响力的设计公司之一)

    Aceyclee
    Serverless无服务器云函数
  • InnoDB 事务加锁分析

    一般大家对数据库事务的了解可能停留在事务的ACID特性以及事务4种不同的隔离级别层面上,而对于事务 4 种不同隔离级别如何实现了解相对较少。

    2020labs小助手
    MySQLSQL数据库MVCMVCC
  • FutureTask 核心源码解析

    研究源码,一般我们都从整体以及实例先入手,再研究细节,不至于一开始就“深陷其中而"当局者迷".

    JavaEdge
    HTTPJava
  • 200行代码落地人脸识别开锁应用

    2019年国庆,帮朋友实现了一个人脸识别进行开锁的功能,用在他的真人实景游戏业务中。几个月来运行稳定,体验良好,借着这个春节宅家的时间,整理一下这个应用的实现过程。

    高树磊
    人脸识别图像处理
  • 滑动验证码攻防对抗

        在业务安全领域,滑动验证码已经是国内继,传统字符型验证码之后的标配。众所周知,打码平台和机器学习这两种绕过验证码的方式,已经是攻击者很主流的思路,不再阐述。冷渗透介绍的是一个冷门的绕过思路和防御方案。这些积累,均来自于实战之中,希望有用。

    周俊辉
    HTTP网络安全安全网站
  • 程序员进阶必读,万字总结Mysql优化精华篇

    price decimal(8,2)有2位小数的定点数,定点数支持很大的数(甚至是超过int,bigint存储范围的数)

    程序员内点事
    全文检索缓存SQL数据库Python
  • 运维转型 | 运维人不再只是“救火英雄”

    各行各业都开启了数字化转型的进程,运维团队在这种时代的浪潮中又该何去何从?我在帮助一些企业落地了运维技术平台之后,开始反思这个问题,并将所思所想整理成本篇文章。

    嘉为科技
    企业运维自动化云计算

扫码关注云+社区

领取腾讯云代金券