时间戳

首页 > 解决方案 > 选择输入类型为：file (pdf) 的本地文件并将其转换为 base64 字符串

javascript - 选择输入类型为：file (pdf) 的本地文件并将其转换为 base64 字符串

问题描述

如何从具有输入类型的选定文件中获取base64字符串：javascript中的文件（多个.pdf）。我需要一个变量中的base64字符串。

 function handleFileSelect(e) {
            console.dir(e);
            if (!e.target.files) return;
            selDiv.innerHTML = "";
            var files = e.target.files;
            for (var i = 0; i < files.length; i++) {

                var base64;
                var fileToLoad = document.getElementById("files").files[i]
                var fileReader = new FileReader();
                fileReader.onload = function (fileLoadedEvent) {
                    base64 = fileLoadedEvent.target.result;
                    console.log(base64);
                };
                fileReader.readAsDataURL(fileToLoad);

                var f = files[i];
                var TmpPath = URL.createObjectURL(e.target.files[i]);
                var name = f.name;
                var extencion = f.name.split('.')[1];

                selDiv.innerHTML += f.name + "&nbsp;&nbsp;&nbsp;&nbsp; <a href='#' onclick=verdetalle(" + i + ",'" + extencion + "','" + name + "','" + base64 + "','" + TmpPath + "')>Ver Detalle</a>" + "<br/>";
            }
        }

但我不尊重我的 base64 变量的值，只有当我从浏览器调试它时。

在这行代码中，我为每个选定的文件创建一个链接，在其中分配一个 onchange 并传递变量 i、扩展名、名称、base64、TmpPath，但我缺少 base64 变量

selDiv.innerHTML += f.name + "&nbsp;&nbsp;&nbsp;&nbsp; <a href='#' onclick=verdetalle(" + i + ",'" + extencion + "','" + name + "','" + base64 + "','" + TmpPath + "')>Ver Detalle</a>" + "<br/>";

标签： javascriptasp.nethtmlbase64

解决方案

试试下面的代码片段，

var base64String;
function handleFileSelect(callback) {    
    var file = document.getElementById('filePicker').files[0];
        var reader = new FileReader();

        reader.onload = function(readerEvt) {
            var binaryString = readerEvt.target.result;
            base64String = btoa(binaryString);
            // alert(base64String);
            // Do additional stuff
            callback(base64String);
        };

        reader.readAsBinaryString(file);
};
<div>
    <div>
        <label for="filePicker">Choose file:</label><br>
        <input type="file" id="filePicker" onchange="handleFileSelect(function(base64String){alert(base64String)})">
    </div>
    <br>
</div>

推荐阅读