input标签获取到的文件内容展示

input标签获取到的文件内容展示

读取图片，文件名并展示

<div class="img-box">
        <img src="" alt="" id="showImgBox">
        <div class="name-box"></div>
        <div class="input-box"><input type="file"></div>
    </div>
    <script>
        const input = document.querySelector('.input-box input');
        const nameBox = document.querySelector('.name-box');

        input.addEventListener('input', function() {
            const inputFile = input.files[0];
            nameBox.innerHTML = inputFile.name;//读取文件
            const showFileInfo = document.querySelector('#showImgBox');
            if (inputFile && showFileInfo) {
                const reader = new FileReader();
                //获得本地的图片地址  放在reader.result内
                reader.readAsDataURL(inputFile);
                reader.onload = function(e) { 
                    showFileInfo.src = reader.result;
                }
            }
        })
    </script>

效果：

读取文本文件内容

运用 reader.readAsText(inputFile,'UTF-8');方法。