zoukankan      html  css  js  c++  java
  • Html 文件内容展示 图片展示

    二话不说,上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>
    

    参考文章

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

  • 相关阅读:
    世纪末的星期
    马虎的算式
    蜜蜂飞舞
    Torry 的困惑
    级数调和
    数列
    最大最小公倍数
    蚂蚁感冒
    12.integer to Roman
    13.Roman to Integer
  • 原文地址:https://www.cnblogs.com/Draymonder/p/12099221.html
Copyright © 2011-2022 走看看