Html 文件内容展示 图片展示

二话不说，上code。
中间用到了 FileReader，把图片数据读取并且展示
使用了方法onload 和 readAsDataURL

code

<style>
    .thumb {
        height: 75px;
        border: 19x solid #000;
        margin: 10px 5px 0 0;
    }
</style>

<input type="file" id="files" name="files[]" multiple/><br/>
<output id="list"></output>


<script>
    function handleFileSelect(evt) {
        // for (var i in evt.target) {
        //     console.log(i)
        //     console.log(evt.target[i])
        //     console.log("  ")
        // }

        var files = evt.target.files;
        
        for (var i = 0; i < files.length; ++i) {
            var file = files[i];
            // image/png
            if (!file.type.match('image*')) {
                continue;
            }
            // console.log(file.type)
            var reader = new FileReader();
            console.log("2333")
            reader.onload = (function(theFile) {
                return function(e) {
                    var span = document.createElement("span")
                    console.log("result " + e.target.result)
                    span.innerHTML = ['<img class="thumb" src="', e.target.result, '" title="', 
                        escape(theFile.name), '"/>', '<br/>'].join('')
                    document.getElementById('list').insertBefore(span, null);
                }
            })(file);

            reader.readAsDataURL(file)
        }

    }

    document.getElementById("files").addEventListener('change',handleFileSelect, false);
</script>

参考文章

通过 File API 使用 JavaScript 读取文件 https://www.html5rocks.com/zh/tutorials/file/dndfiles/