众所周知JavaScript在设计上处于安全角度考虑，是不允许读写本地文件的（原因请自行百度）；
但是在实际项目应用中，经常会使用到上传图片，并且可以让用户直接预览图片。对于此种做法有两种方法可以实现：一是前后台交互，后台将图片地址返回前端；
二是，我今天写的内容，使用FileReader对象——允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容；此种方法可以优化图片加载速度，减少方法一占用带宽的问题；
但是，此种方法兼容性存在问题，主要是IE浏览器（ie10以上没问题），本文不在讨论兼容性问题，代码如下：
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> ???????<style type="text/css"> ???????????#preview { ???????????????display: inline-block; ???????????????width: 2.56rem; ???????????????height: 2.56rem; ???????????????position: relative; ???????????????background-image: url(img/iconfont-tianjia.png); ???????????????background-repeat: no-repeat; ???????????????background-size: cover; ???????????} ???????????????????????#file { ???????????????width: 100%; ???????????????height: 100%; ???????????????opacity: 0; ???????????????position: absolute; ???????????????left: 0; ???????????????top: 0; ???????????????cursor: pointer; ???????????????z-index: 5; ???????????} ???????</style> ???</head> ???<body> ???????<div id="preview"> ???????????<input type="file" accept="image/*" id="file" value="" /> ???????</div> ???????<script type="text/javascript"> ???????????var preview = document.querySelector(‘#preview‘); ???????????var eleFile = document.querySelector(‘#file‘); ???????????eleFile.addEventListener(‘change‘, function() { ???????????????var file = this.files[0]; ???????????????????????????????// 确认选择的文件是图片 ???????????????????????????????if(file.type.indexOf("image") == 0) { ???????????????????var reader = new FileReader(); ???????????????????reader.readAsDataURL(file); ???????????????????????????????????????reader.onload = function(e) { ???????????????????????// 图片base64化 ???????????????????????var newUrl = this.result; ???????????????????????preview.style.backgroundImage = ‘url(‘ + newUrl + ‘)‘; ???????????????????}; ???????????????} ???????????}); ???????</script> ???</body></html>直接复用测试即可，FileReader对象是通过将图片url转换成base64格式，然后显示出来。
前端实现input[type='file']上传图片预览效果
原文地址：http://www.cnblogs.com/web-wjg/p/7799173.html