Question

情况：

用户可以选择使用简单文件选择器附加文件的表单，该文件选择器在选择文件后立即将文件转换为Base64并存储以供以后使用。

var handleFileSelect = function(evt) {
    var files = evt.target.files;
    var file = files[0];
    if (files && file) {
        var reader = new FileReader();

        reader.onload = function(readerEvt) {
            var binaryString = readerEvt.target.result;
            konvertierteDatei = btoa(binaryString);
        };

        reader.readAsBinaryString(file);
    }
};

if (window.File && window.FileReader && window.FileList && window.Blob) {
    document.getElementById('attachementName').addEventListener('change', handleFileSelect, false);
} else {
    alert('Die Datei APIs werden von diesem Browser nicht vollständig unterstützt.');
}

问题

以前使用了一种糟糕的解决方法，我将base64编码文件存储在隐藏的textarea中，然后通过获取所述textarea的值将其添加到我的JSON数据中。

我希望通过将编码文件存储在konvertierteDatei中并稍后将其值添加到数据中来使其“更好”，但无论我如何设置它都无效。

解决方案：

编辑：这是一个工作片段，好像是@H.B.是的，我尝试从不同的范围访问konvertierteDatei

var handleFileSelect = function(evt) {
var files = evt.target.files;
var file = files[0];
if (files && file) {
    var reader = new FileReader();

    reader.onload = function(readerEvt) {
        var binaryString = readerEvt.target.result;
        konvertierteDatei = btoa(binaryString);
        document.getElementById("base64textarea").value = btoa(binaryString);
    };

    reader.readAsBinaryString(file);
}
};

if (window.File && window.FileReader && window.FileList && window.Blob) {
document.getElementById('attachementName').addEventListener('change', handleFileSelect, false);
} else {
alert('Die Datei APIs werden von diesem Browser nicht vollständig unterstützt.');
}

<input class="infrastruktur__input infrastruktur__input---file" id="attachementName" type="file"/>
<br>
<h1>Base64 encoded file</h1>
     <textarea id="base64textarea" placeholder="Base64 will appear here" cols="50" rows="15"></textarea>

Answer 1

你的大多数代码看起来都应该起作用，但我认为你试图在元素存在于DOM之前添加事件监听器。

添加一个事件监听器来等待DOM完成加载所有元素足以让我让它工作;

var handleFileSelect = function(evt) {
    alert("file selected");
    var files = evt.target.files;
    var file = files[0];
    if (files && file) {
        var reader = new FileReader();

        reader.onload = function(readerEvt) {
            var binaryString = readerEvt.target.result;
            konvertierteDatei = btoa(binaryString);
            console.log(konvertierteDatei);
        };

        reader.readAsBinaryString(file);
    }
};



document.addEventListener("DOMContentLoaded", function() { 
    if (window.File && window.FileReader && window.FileList && window.Blob) {
       document.getElementById('attachementName').addEventListener('change', handleFileSelect, false);
    } else {
        alert('Die Datei APIs werden von diesem Browser nicht vollständig unterstützt.');
    }
});

<input class="formOne__input formOne__input---file" id="attachementName" type="file"/>

将base64转换后的文件存储在变量中以供以后使用

1 个答案: