用html5实现图片预览功能
用html5实现图片预览功能
我们在上传图片的时候往往需要预览，目前大部分的网站，总结起来用三种方式来实现：
第一种最为常见，需要和后端配合。点击上传图片的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
腾讯云开发者
