标签:
以http协议开头的url的网页,即服务器上的网页是不能显示计算机本地图片的。
如果想查看本地图片但不使用服务端的上传功能,可以使用html5的fileReader实现。
(IE10以下的浏览器不支持这个功能)
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>html5 fileReader</title> </head> <style type="text/css"> *{margin: 0;padding: 0;} 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> <input type="file"/> <div class="preview"></div> </body> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.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)); }; } $(‘input[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