如何在前端实现图片上传前预览

图片上传回显通常有两种实现方式：一种是先上传，然后通过后台调用回显；另一种则是在上传前通过js调用预览。本文介绍通过js上传前预览的实现方式。

实现图片上传预览主要分为三步：

1、通过files()方法获得图片对象

//获取文件对象

var file = $("#file_input").files[0];

2、通过 creatObjectURL(file)方法创建指向参数file对象的URL

//函数的参数是第一步获取到的file对象

function getObjectURL(file) {

var url = null ;

//浏览器适配

if (window.createObjectURL!=undefined) {

// 基本格式

url = window.createObjectURL(file) ;

}

else if (window.URL!=undefined) {

// firefox

url = window.URL.createObjectURL(file) ;

}

else if (window.webkitURL!=undefined) {

// chrome

url = window.webkitURL.createObjectURL(file) ;

}

//返回URL

return url ;

}

3、将创建的URL赋给需要展示图片的img标签的src属性

//调用 getObjectUrl()函数创建URL对象

var imgUrl = getObjectUrl(file);

//获取用于预览图片的img标签

var preview = $("#preview");

//修改img标签的src属性

preview.attr("src","imgUrl");

通过以上三步，就可以实现简单的上传图片预览功能；同时可以通过 “accept”属性控制允许上传的文件类型。

完整代码：

完整代码

效果截图：

预览效果