以http协议开头的url的网页，即服务器上的网页是不能显示计算机本地图片的，如果想查看本地图片但不使用服务端的上传功能，可以使用html5的fileReader实现。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>html5预览本地图片</title>
</head>
<style type="text/css">
#preview {width: 300px;height: 300px;border: 1px solid #ccc;overflow: hidden;}
#preview img {width: 100%;height: 100%;}
</style>
<body>
<input type="file"/>
<div id="preview"></div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
// IE10以下的浏览器不支持这两种方法
function dataURLPreview( file ) {
var img = new Image(),
url = img.src = URL.createObjectURL( file );
img.onload = function() {
// revokeObjectURL方法Opera不支持
URL.revokeObjectURL(url);
$(‘#preview‘).empty().append( $( img ) );
}
}
// IE浏览器需要使用FileReader
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>
时间： 2024-10-05 05:07:24