我们在上传图片的时候往往需要预览,目前大部分的网站,总结起来用三种方式来实现:
第一种最为常见,需要和后端配合。点击上传图片的input,触发input的onchange事件,在onchange事件中向后端提供的接口发送图片信息,之后返回的数据中包括图片的url,再将url赋值给img的src属性从而实现图片预览。
当然,前端的朋友会产生疑惑,图片是以什么形式传递到后端呢?针对这个我会单独写一篇文章来阐述,现在暂不详述。简单来说,表单形式传递图片会修改entype属性,这里一般会用formdata实现。
第二种是利用html的新特性FileReader。先来看以下这个demo,建议大家可以将代码拷贝下来自己测试。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js图片预览功能</title>
</head>
<body>
<!-- 上传图片的input 绑定onchange事件-->
<input type="file" onchange="previewFile()"><br>
<!-- 预览的图片 -->
<img src="" height="200" width="300" alt="Image preview..."/>
<script language=javascript>
function previewFile() {
var preview = document.querySelector('img');
// 选中file元素,并访问其files属性的第一个值
var file = document.querySelector('input[type=file]').files[0];
console.log(document.querySelector('input[type=file]').files);
console.log(document.querySelector('input[type=file]').files[0]);
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
</script>
</body>
</html>
代码中分别执行了如下两句:
console.log(document.querySelector('input[type=file]').files);
console.log(document.querySelector('input[type=file]').files[0]);
得到的结果分别为:
可以看出file包含着图片的信息:代码再往下面是 new 了一个FileReader ,并且监听的是这个对象的 onloadend事件,事件内容就是修改img的src属性。
FileReader实例化的对象上有个方法:reader.readAsDataURL(参数),
这个方法是个回调函数,参数为上面获取的包含图片信息的file对象,readAsDataURL读取图片信息对象完成后,会触发reader上的onloadend事件,该事件的回调函数中的数据就是datebase64化后的图片信息,将其插入到图片的img的src图片展现。
上面这种方式有些浏览器不是很兼容,不考虑低版本浏览器的情况下完全可以使用。
第三种方法是关于blob的。实现代码如下,相比上面更加简单。
blob参考(http://www.cnblogs.com/hhhyaaon/p/5928152.html)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js图片预览功能</title>
</head>
<body>
<!-- 上传图片的input 绑定onchange事件-->
<input type="file" id="imgFile" onchange="previewFile()"><br>
<!-- 预览的图片 -->
<img id="img" src="" height="200" width="300" alt="Image preview..."/>
<script language=javascript>
function previewFile() {
var ele = document.getElementById('imgFile').files[0];
var createObjectURL = function(blob){
return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob);
};
var newimgdata = createObjectURL(ele);
document.getElementById('img').src = newimgdata;
}
</script>
</body>
</html>
原理如下:第一步还是获取图片信息 file;第二步将其传入一个方法: window.URL.createObjectURL( )
这个方法返回一个url,url的样式为:
而通过第二种方法实现的url,如图:
结果一目了然,后两种方式相对于第一种来说,预览图片不用向后端提前发送,减轻服务器压力,但都有一定的兼容性问题,可根据具体项目来做选择。
参考: https://developer.mozilla.org/zh-CN/docs/Web/API/Blob http://www.cnblogs.com/hhhyaaon/p/5928152.html http://www.cnblogs.com/saysmy/p/5626337.html http://www.jb51.net/article/78215.htm