HTML5图片拖拽预览原理及实现

一、前言

这两天恰好有一位同事问我怎样做一个图片预览功能。作为现代人的我们首先想到的当然是HTML5啦，其实HTML5做图片预览已经是一个老生常谈的问题了。我在这里就简单说说其中相关的一些东西，当然会附上我们的源码。在 HTML5 之前我们做图片预览主流做法有两种,第一种是通过 Flash 插件来做预览，第二种是 Ajax 实现的假预览，也就是说选择图片文件后，图片其实已经异步上传到服务器，服务器处理后返回图片路径，前端得到响应结果做出处理从而使图片显示在界面上。而有了 HTML5 之后就可以强烈鄙视上面两种做法了。

二、FileReader

要做图片预览功能，就不得不介绍一下 FileReader，顾名思义，它是用来读取文件的。当然新东西总会有一些顽固派排斥的，我们先来看看其兼容性如何（这不是本文讨论的重点）。

PC端兼容列表

移动端兼容列表

兼容性的话大家根据自己的需求参考一下上面的对照表，我们接着来看看 FileReader 的几个常用属性和常用方法

属性

FileReader.onload 读取完成
FileReader.result 读取结果
FileReader.error 读取错误
FileReader.readyState 前文档的状态

方法

FileReader.abort() 中断读取-无参数
FileReader.readAsArrayBuffer(file) 将文件读取为ArrayBuffer 对象参数:文件
FileReader.readAsBinaryString(file) 将文件读取为二进制码 - 参数:文件
FileReader.readAsDataURL(file) 将文件读取为DataURL 参数:文件
FileReader.readAsText(file) 将文件读取为文本参数:文件

废话不多说，我们通过代码来更直观点认识上面的属性和方法。回归到需求，做一个图片预览功能。首先理一理我们需要有的东西，第一要素当然是文件（文件选择器），第二当然是预览（容器）。

html 代码 (样式我顺手加上了)

<!DOCTYPE html>

<html>

<head>

    <title>Cboyce－HTML5图片预览</title>

    <style type="text/css">

        /*主容器*/

        .container{

            width: 90%;

            margin-top: 20px;

        }

        /*图片预览容器*/

        .container .img-prev-container{

            width: 200px;

            height: 100px;

            margin:10px auto;

            border:1px solid #ccc;

        }

        /*预览图片样式*/

        .container .img-prev-container img{

            width: 100%;

            height: 100%;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="img-prev-container">

        </div>

        <input type="file" value="请选择图片" id="fileSelecter" />

    </div>

</body>

</html>

接下来该 FileReader 出场了

window.onload = function(){

    //触发 change 事件

    GetDomById('fileSelecter').onchange = function(event){

        //获取文件对象

        var file = event.target.files[0];

        //创建reader对象

        var reader = new FileReader();

        //读取完成后触发

        reader.onload = function(ev){

            //获取图片的url

            var _img_src = ev.target.result;

            console.log(_img_src)

            //添加预览图片到容器框

            var img  = document.createElement('img');

            img.setAttribute('src',_img_src);

            GetDomById('img-perv-div').appendChild(img);

        }

        //获取到数据的url 图片将转成 base64 格式

        reader.readAsDataURL(file);

    }

}

//简化 document.getElementById() 函数

function GetDomById(id){

    return document.getElementById(id);

}

细节注意:这里的图片格式默认转为 base64

补充说明:

event.target 属性，其特点在我们的代码中其实不忙看出来 "捕获当前事件作用的对象"，通俗点来讲就是，谁触发了该事件，我就能通过该事件的 target 拿到谁。

其实上述代码还有一个小 bug "换图变成多图"。请看下图

修复：改造 onload

reader.onload = function(ev){

    //获取图片的url

    var _img_src = ev.target.result;

    //预览图的容器

    var _img_container = GetDomById('img-perv-div')

    //添加预览图片到容器框

    var _imgs = _img_container.getElementsByTagName('img');

    //容器中没有则创建，有则修改 src 属性

    if(!_imgs.lenght){

        _imgs[0] = document.createElement('img');

        _imgs[0].setAttribute('src',_img_src);

        _img_container.appendChild(_imgs[0]);

    }else{

        _imgs[0].setAttribute('src',_img_src);

    }

}

解决bug

三、实现拖拽预览

上面我们已经把基础功能给完成了，接下来我们给该程序加个拓展--拖拽图片到预览框自动加载。要完成该功能还是得靠 HTML5 的 Drag 和 drop。如果你还搞不清楚我们要做什么，那我们先来看下最终效果。

在代码开始之前我们先来了解两个实现该功能最为关键的事件。 1. dragover 拖拽一个对象到目标对象上面触发该事件 2. drop 拖放事件结束时触发。通俗来讲就是当我们拖拽一个对象到目标对象上后放开（松开鼠标左键）该对象的时候触发

接下来我们来看下代码，这里也对之前的代码做出了一些改造

window.onload = function(){

    //预览图的容器

    var _img_container = getDomById('img-perv-div')

    //创建reader对象

    var reader = new FileReader();

    //触发 change 事件

    getDomById('fileSelecter').onchange = function(event){

        //获取文件对象

        var file = event.target.files[0];

        //读取完成后触发

        reader.onload = function(ev){

            //获取图片的url

            var _img_src = ev.target.result;

            //添加预览图片到容器框

            showPrevImg(_img_container,_img_src);

        }

        //获取到数据的url 图片将转成 base64 格式

        reader.readAsDataURL(file);

    }

    //添加拖放支持

    _img_container.addEventListener('dragover',function(ev){

        ev.preventDefault();//阻止默认事件。比如说Chrome是直接将图片用浏览器打开

    },false)

    _img_container.addEventListener('drop',function(ev){

        ev.preventDefault();

        reader.onload = function(ev){

            //获取图片的url

            var _img_src = ev.target.result;

            //图片预览处理

            showPrevImg(_img_container,_img_src);

        }

        reader.readAsDataURL(ev.dataTransfer.files[0])

    },false)

}

//简化 document.getElementById() 函数

function getDomById(id){

    return document.getElementById(id);

}

//图片预览处理函数

function showPrevImg(_img_container,_img_src){

    //添加预览图片到容器框

    var _imgs = _img_container.getElementsByTagName('img');

    //容器中没有则创建，有则修改 src 属性

    if(!_imgs.lenght){

        _imgs[0] = document.createElement('img');

        _imgs[0].setAttribute('src',_img_src);

        _img_container.appendChild(_imgs[0]);

    }else{

        _imgs[0].setAttribute('src',_img_src);

    }

}

代码分析

addEventListener('dragover',function(ev){

    ev.preventDefault();

},false)

这段代码重点在于 ev.preventDefault(); 阻止默认行为，如果我们不阻止其默认行为将会产生下面的后果

接下来要做的就是拖放结束展示图片预览效果

_img_container.addEventListener('drop',function(ev){

    ev.preventDefault();

    reader.onload = function(ev){

        //获取图片的url

        var _img_src = ev.target.result;

        //添加预览图片到容器框

        showPrevImg(_img_container,_img_src);

    }

    reader.readAsDataURL(ev.dataTransfer.files[0])

},false)

这里用到 event.dataTransfer 我们补充一下，我们先来看下他的定义

dataTransfer 拖曳数据传递对象,其提供了对于预定义的剪贴板格式的访问，以便在拖曳操作中使用

通俗来讲就是，我们在拖曳操作中可以使用它来操作我们拖曳的对象。比如拖图片，通过它能拿到我们所拖曳的图片对象

最后，强迫症犯了，稍微写了点样式美化了一下完整代码如下

<!DOCTYPE html>

<html>

<head>

    <title>Cboyce－HTML5图片预览</title>

    <style type="text/css">

        body{

            font-family: '微软雅黑';

        }

        /*主容器*/

        .container{

            width: 90%;

            margin-top: 20px;

        }

        /*每一个图片预览项容器*/

        .img-prev-item{

            width: 200px;

            height: 200px;

            display: inline-block;

            border:1px solid #ccc;

            text-align: center;

            border-radius: 3px;

        }

        /*图片预览容器*/

        .container .img-prev-container{

            width: 200px;

            height: 156px;

            margin: 0 auto;

            border-bottom: 1px solid #ccc;

            vertical-align: middle;

            display: table-cell;

            padding: 2px;

            color: #838383;

            text-align: center

        }

        /*预览图片样式*/

        .container .img-prev-container img{

            width: 100%;

            height: auto;

            max-height: 100%;

        }

        /*label*/

        .selfile{

            background-color: #0095ff;

            color: white;

            padding: 6px 58px;

            border-radius: 5px;

        }

        /*工具条 div*/

        .tool{

            padding-top: 9px;

        }

        /*隐藏文件选择器*/

        #fileSelecter{

            display: none;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="img-prev-item">

            <div class="img-prev-container" id="img-perv-div">

                请选择图片或者<br />将图片拖拽至此

            </div>

            <div class="tool">

                <label for="fileSelecter" class="selfile">请选择图片</label>

                <input type="file" value="请选择图片" id="fileSelecter" />

            </div>

        </div>

    </div>

    <script type="text/javascript">

        window.onload = function(){

            //预览图的容器

            var _img_container = getDomById('img-perv-div')

            //创建reader对象

            var reader = new FileReader();

            //触发 change 事件

            getDomById('fileSelecter').onchange = function(event){

                //获取文件对象

                var file = event.target.files[0];

                //读取完成后触发

                reader.onload = function(ev){

                    //获取图片的url

                    var _img_src = ev.target.result;

                    //添加预览图片到容器框

                    showPrevImg(_img_container,_img_src);

                }

                //获取到数据的url 图片将转成 base64 格式

                reader.readAsDataURL(file);

            }

            //添加拖放支持

            _img_container.addEventListener('dragover',function(ev){

                //ev.stopPropagation();

                ev.preventDefault();//阻止默认事件。比如说Chrome是直接将图片用浏览器打开

                console.log('dragover')

            },false)

            // _img_container.addEventListener('dragend',function(ev){

            //  ev.stopPropagation();

            //  ev.preventDefault();

            //  console.log('dragend')

            // },false)

            _img_container.addEventListener('drop',function(ev){

                //ev.stopPropagation();

                ev.preventDefault();

                console.log('drop')

                //console.log(ev.dataTransfer.files[0])

                reader.onload = function(ev){

                    //获取图片的url

                    var _img_src = ev.target.result;

                    //添加预览图片到容器框

                    showPrevImg(_img_container,_img_src);

                }

                reader.readAsDataURL(ev.dataTransfer.files[0])

            },false)

        }

        //简化 document.getElementById() 函数

        function getDomById(id){

            return document.getElementById(id);

        }

        function showPrevImg(_img_container,_img_src){

            _img_container.innerHTML="";

            //添加预览图片到容器框

            var _imgs = _img_container.getElementsByTagName('img');

            //容器中没有则创建，有则修改 src 属性

            if(!_imgs.lenght){

                _imgs[0] = document.createElement('img');

                _imgs[0].setAttribute('src',_img_src);

                _img_container.appendChild(_imgs[0]);

            }else{

                _imgs[0].setAttribute('src',_img_src);

            }

        }

        //接下来要做的就是拖放结束展示图片预览效果

    </script>

</body>

</html>

展开完整代码

运行效果如下

四、结语

基本上实现以及代码的原理也就解释到这了。其实前端做的图片预览功能大多数需求是用来上传到服务器的。不得不提到的是这里的拖拽预览虽然看起来体验不错，但是要将该文件上传就得做一些特殊处理。这个我就留到后面的博客再讲了，有问题的朋友可以直接留言。

限于笔者技术，文章观点难免有不当之处，希望发现问题的朋友帮忙指正，笔者将会及时更新。也请转载的朋友注明文章出处并附上原文链接，以便读者能及时获取到文章更新后的内容，以免误导读者。笔者力求避免写些晦涩难懂的文章（虽然也有人说这样显得高逼格，专业），尽量使用简单的用词和例子来帮助理解。如果表达上有好的建议的话也希望朋友们在评论处指出。

本文为作者原创,转载请注明出处! Cboyce