zoukankan      html  css  js  c++  java
  • 读取文件/文件夹并回显

    </body>
    <input type="file" id="selectFiles" onchange="dealSelectFiles()" multiple webkitdirectory>
    <canvas id="myCanvas" width=1440 height=900></canvas>
    
    <script type="text/javascript">
        // 读取文件夹并回显
        var imgPosX = 0;
        var imgWidth = 256;
    
        function dealSelectFiles() {
            /// get select files.
            var selectFiles = document.getElementById("selectFiles").files;
    
            for (var file of selectFiles) {
                console.log(file.webkitRelativePath);
                /// read file content.
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onloadend = function () {
                    /// deal data.
                    var img = new Image();
                    /// after loader, result storage the file content result.
                    img.src = this.result;
                    img.onload = function () {
                        var myCanvas = document.getElementById("myCanvas");
                        var cxt = myCanvas.getContext('2d');
                        cxt.drawImage(img, imgPosX, 0);
                        imgPosX += imgWidth;
                    }
                }
            }
        }
    </script>
    </html>
    
    <body>
    
    <input type="file" onchange="previewFile()"><br>
    <img src="" height="200" alt="Image preview...">
    <script>
        // 加载图片并并回显
        function previewFile() {
            // Where you will display your image
            var preview = document.querySelector('img');
            // The button where the user chooses the local image to display
            var file = document.querySelector('input[type=file]').files[0];
            // FileReader instance
            var reader = new FileReader();
    
            // When the image is loaded we will set it as source of
            // our img tag
            reader.onloadend = function () {
                preview.src = reader.result;
            }
    
    
            if (file) {
                // Load image as a base64 encoded URI
                reader.readAsDataURL(file);
            } else {
                preview.src = "";
            }
        }
    </script>
    
    
    </body>
    
  • 相关阅读:
    C++解析(5):内联函数分析
    C++解析(4):引用的本质
    C++解析(3):布尔类型与三目运算符
    C++解析(2):进化后的 const 分析
    C++解析(1):C到C++的升级
    net与树莓派的情缘(二)
    net与树莓派的情缘(一)
    Ngin 简单配置文件
    sql geography类型(地理坐标) 赋值
    MongoDB与c#(二)简单例子 使用1.7版本驱动
  • 原文地址:https://www.cnblogs.com/bbdbolg/p/14691384.html
Copyright © 2011-2022 走看看