Javascript - 如何从输入 type="file" 获取实际文件答案

【问题标题】：Javascript - How to get the actual file from an input type="file"Javascript - 如何从输入 type="file" 获取实际文件
【发布时间】：2020-06-14 19:41:03
【问题描述】：

我正在尝试上传一个文件并将该文件转换为它的 data-uri 副本，而不需要任何类型的后端，但我一直在试图弄清楚如何真正获取上传的文件。

document.getElementById("myInput").files[0]

允许我访问一些信息，但不能访问实际文件。有file api，但我找不到太多关于如何使用它的文档，只是它存在。

有没有办法完全在浏览器中完成这项工作？

【问题讨论】：

Blob.stream() Transforms the File into a ReadableStream that can be used to read the File contents 我想你在找这个
也许这就是你要找的东西stackoverflow.com/questions/36280818/…
@DiyorbekSadullayev 我相信它是（并且是我最终使用的），我如何将其标记为重复？

标签： javascript html file-io

【解决方案1】：

这是多文件输入的代码。您可以通过删除循环来为单个文件执行此操作。这将在您选择文件后立即获取文件并显示在选定的 img 标记内

HTML 代码

<div>
    <img id="img-1" src="#" />
</div>
<div>
    <img id="img-2" src="#"/>
</div>

Javascript 代码

function readURL(input) {
        if (input.files && input.files[0]) {
            var countFiles = input.files.length;
            for (var i = 0; i < countFiles; i++) {
                // console.log(input.files);
                if(i === 0) {
                    // console.log(input.files);
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        // console.log(e);
                        $('#img-1')
                            .attr('src', e.target.result)
                            .width(135)
                            .height(135);
                    };
                    reader.readAsDataURL(input.files[i]);
                }else if(i === 1) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        // console.log(e);
                        $('#img-2')
                            .attr('src', e.target.result)
                            .width(135)
                            .height(135);
                    };
                    reader.readAsDataURL(input.files[i]);
                }
            }
        }
    }

【讨论】：