标签：
以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>
标签：
原文地址：http://www.cnblogs.com/happyfreelife/p/4240238.html
