HTML5预览本地图片

浏览数：27 / 时间：2015年06月09日

以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>