Javascript - 如何從輸入類型=“文件”中獲取實際文件

Question

我正在嘗試上傳一個文件並將該文件轉換為它的 data-uri 副本，而不需要任何類型的后端，但我一直在試圖弄清楚如何實際獲取上傳的文件。

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

允許我訪問一些信息，但不能訪問實際文件。 有文件 api ，但我找不到太多關於如何使用它的文檔，只是它存在。

有沒有辦法完全在瀏覽器中做到這一點？

Answer 1

這是多文件輸入的代碼。 您可以通過刪除循環來為單個文件執行此操作。 這將在您收到 select 文件后立即獲取該文件並顯示在選定的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]);
                }
            }
        }
    }