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