首页 > Web开发 > 详细

html 文件展示

时间:2019-12-26 00:03:15      阅读:109      评论:0      收藏:0      [点我收藏+]

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

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>

html 文件展示

原文:https://www.cnblogs.com/Draymonder/p/12099221.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!