FileReader读取本地图片并预览

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .thumb

            height: 75px;

            border: 1px solid #000;

            margin: 10px 5px 0 0;

        }

    </style>

    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

</head>

<body>

    <h2>FileReader读取本地图片并预览</h2>

    <div>

        <input type="file" id="Files" name="files[]" accept="image/*" multiple />

        <ul id="Errors"></ul>

        <div style="color: #ccc; font-size: 10px;">如果需要查看原始尺寸图片,可点击相应图片;再次单击该图片,则恢复小图片。</div>

        <div id="Preview"></div>

    </div>

</body>

<script>

function fileSelect(e){

    e = e (|window.event;

    var files = e.target.files;

    var ireg = /image\/.*/i,

        p = document.getElementById('Preview');

    var ul = document.getElementById('Errors');

    for (var i = 0,f;f=files[i]; i++) {

        if(!f.type.match(ireg)){

            var li = document.createElement('li');

            li.innerHTML = '<li>'+f.name+'不是图片文件</li>';

            ul.appendChild(li);

            continue;

        )

        var reader = new FileReader();

        reader.onload = (function(file){

            return function(e){

                var span = document.createElement('span');

                span.innerHTML = '<img class="thumb" src="'+this.result + '" alt="'+file.name+'"/>';

                p.insertBefore(span, null);

            };

        })(f);

        reader.readAsDataURL(f);

    }

}

    if(window.File && window.FileList && window.FileReader && window.Blob) {

        document.getElementById('Files').addEventListener('change', fileSelect, false);

        

        document.getElementById('Preview').addEventListener('click', function(e) {

            if(e.target.tagName.toLowerCase() == 'img' && e.target.className == 'thumb') {

                e.target.className = '';

            }  else if(e.target.tagName.toLowerCase() == 'img' && e.target.className == '') {

                e.target.className = 'thumb';

            } 

        });

    } else {

        document.write('您的浏览器不支持File Api');

    }

</script>

</html>