前端图片预览漫谈

在图片上传的使用场景中，人们总是期盼能及时看到图片上传的效果，所以说图片预览很有必要。根据图片提交服务器并保存这个时间节点划分，图片预览又可以分为本地图片预览和服务器图片预览。

一、本地图片预览

1.使用对象URL

使用Web API 接口中的URL.createObject可以创建一个给定的对象的URL。该URL的生命周期和当前的document绑定，所以复制在新窗口中打开无效。

<input onchange="preview(this)" type="file"/>
<img id="img_show"/>

<script>
function preview(e){
    var file = e.files[0];
    var url = window.createObjectURL(file);
    document.querySelector('#img_show').setAttribute('src',url);
}
</script>

2.使用数据URI

数据URI则是通过将图片内容装换成base64格式的字符串显示出来。将此串复制黏贴在其它页面能显示出图片，串长度随文件大小的增加而增加。下面是根据File API的FileReader类型获得图片的数据dataURI。

<input onchange="preview(this)" type="file"/>
<img id="img_show"/>

<script>
function preview(e){
    var file = e.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(){
        document.querySelector('#img_show').setAttribute('src',reader.result);
    }
}
</script>

二、服务器图片预览

1.使用返回的图片地址

在实际应用中，我更加偏爱这种方式。如果一个图片要上传到服务器，那么何不把它的上传时间提前啦。

<input onchange="preview(this)" type="file"/>
<img id="img_show"/>

<script>
function preview(e) {
    var formData = new FormData();
    formData.append("file", e.currentTarget.files[0]);
    $.ajax({
        url: '',/*保存图片方法*/
        data: formData,
        type: 'post',
        contentType: false,
        processData: false,
        dataType: 'json',
        success: function(data) {
          //如果成功的话，返回一个{"status":true,"path":"/1.jpg"}这样的json格式字符串
           document.querySelector('#img_show').setAttribute('src',reader.result);
        }
    });
}
</script>

最后在整个页面提交的时候，把src存入数据库就行了。当时这样的做法有以下缺点：

• 上传的图片最后可能不会保存数据库，造成服务器空间浪费
• 从选择完图片到预览加载完成这个过程比起本地预览耗时更久