标签：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>html5 fileReader</title>
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
p{margin-left: 20px;font: 14px/26px "Microsoft YaHei";color: #333;}
input{margin: 20px 0 10px 20px;}
.preview{margin-left: 20px;width: 300px;height: 300px;border: 1px solid #ccc;overflow: hidden;}
.preview img{width: 100%;height: 100%;}
</style>
<body>
<p>
<br>
以http协议开头的url的网页，即服务器上的网页是不能显示计算机本地图片的；<br>
如果想查看本地图片但不使用服务端的上传功能，可以使用html5的fileReader实现；<br>
-IE10以下无法实现这种功能；
</p>
<input type="file"/>
<div class="preview"></div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function dataURLPreview(file) {
var img = new Image(),
url = img.src = URL.createObjectURL(file);
img.onload = function() {
URL.revokeObjectURL(url);
$(‘.preview‘).empty().append($(img));
};
}
// for IE
function fileReaderPreview(file) {
var reader = new FileReader();
reader.onload = function(e) {
var $img = $(‘<img>‘).attr(‘src‘, e.target.result);
$(‘.preview‘).empty().append($img);
};
reader.readAsDataURL(file);
}
$(function() {
$(‘[type=file]‘).change(function(e) {
var file = e.target.files[0];
dataURLPreview(file);
});
});
</script>
</html>
JavaScript使用html5 fileReader来预览本地图片
标签：
原文地址：http://www.cnblogs.com/happyfreelife/p/5379263.html
