前端预览服务器上文件夹,前端图片预览漫谈

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

一、本地图片预览

1.使用对象URL

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

function preview(e){

var file = e.files[0];

var url = window.createObjectURL(file);

document.querySelector('#img_show').setAttribute('src',url);

}

2.使用数据URI

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

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);

}

}

二、服务器图片预览

1.使用返回的图片地址

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

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);

}

});

}

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

上传的图片最后可能不会保存数据库，造成服务器空间浪费

从选择完图片到预览加载完成这个过程比起本地预览耗时更久