从输入表单获取 Base64 编码文件数据

javascript html file-upload base64

2022-08-30 05:19:57

我有一个基本的HTML表单，从中我可以获取一些我在Firebug中检查的信息。

我唯一的问题是，我试图在将文件数据发送到服务器之前对文件数据进行base64编码，该服务器需要以该形式保存到数据库中。

<input type="file" id="fileupload" />

在 Javascript+jQuery 中：

var file = $('#fileupload').attr("files")[0];

我有一些基于可用javascript的操作：.getAsBinary（），.getAsText（），.getAsTextURL

但是，这些都没有返回可以插入的可用文本，因为它们包含不可用的“字符” - 我不想在上传的文件中发生“回发”，并且我需要有多个针对特定对象的表单，因此获取文件并以这种方式使用Javascript非常重要。

我应该如何获取文件，以便我可以使用广泛使用的Javascript base64编码器之一！？

谢谢

更新 - 在这里开始赏金，需要跨浏览器支持!!!

这是我所在的地方：

<input type="file" id="fileuploadform" />

<script type="text/javascript">
var uploadformid = 'fileuploadform';
var uploadform = document.getElementById(uploadformid);


/* method to fetch and encode specific file here based on different browsers */

</script>

跨浏览器支持的几个问题：

var file = $j(fileUpload.toString()).attr('files')[0];
fileBody = file.getAsDataURL(); // only would works in Firefox

此外，IE 不支持：

var file = $j(fileUpload.toString()).attr('files')[0];

所以我必须替换为：

var element = 'id';
var element = document.getElementById(id);

对于 IE 支持。

这适用于Firefox，Chrome和Safari（但不能正确编码文件，或者至少在发布后文件不会正确显示）

var file = $j(fileUpload.toString()).attr('files')[0];
var encoded = Btoa(file);

也

file.readAsArrayBuffer()

似乎只在 HTML5 中受支持？

很多人建议：http://www.webtoolkit.info/javascript-base64.html

但这只会在UTF_8方法上进行base64编码之前返回错误？（或空字符串）

var encoded = Base64.encode(file);

答案 1

这在浏览器端的javascript中是完全可能的。

简单的方法：

readAsDataURL（）方法可能已将其编码为 base64。你可能需要去掉开头的东西（直到第一个），但这没什么大不了的。不过，这会带走所有的乐趣。,

艰难的方式：

如果您想以艰难的方式尝试（或者它不起作用），请查看.这将为您提供一个Uint8Array，您可以使用指定的方法。这可能只有在您想要弄乱数据本身时才有用，例如在上传之前操纵图像数据或执行其他巫毒教魔术。readAsArrayBuffer()

有两种方法：

转换为字符串并使用内置或类似btoa
- 我还没有测试所有情况，但对我有用 - 只需获取字符代码
直接从 Uint8Array 转换为 base64

我最近在浏览器中实现了tar。作为该过程的一部分，我进行了自己的直接Uint8Array->base64实现。我不认为你需要这个，但如果你想看一看，它就在这里;它非常整洁。

我现在做什么：

从 Uint8Array 转换为字符串的代码非常简单（其中 buf 是 Uint8Array）：

function uint8ToString(buf) {
    var i, length, out = '';
    for (i = 0, length = buf.length; i < length; i += 1) {
        out += String.fromCharCode(buf[i]);
    }
    return out;
}

从那里，只需执行以下操作：

var base64 = btoa(uint8ToString(yourUint8Array));

Base64现在是一个base64编码的字符串，它应该只上传桃色。如果您想在推送之前仔细检查，请尝试此操作：

window.open("data:application/octet-stream;base64," + base64);

这将将其下载为文件。

其他信息：

要以Uint8Array的形式获取数据，请查看MDN文档：

https://developer.mozilla.org/en/DOM/FileReader

答案 2

我的解决方案是使用及其结果。readAsBinaryString()btoa()

uploadFileToServer(event) {
    var file = event.srcElement.files[0];
    console.log(file);
    var reader = new FileReader();
    reader.readAsBinaryString(file);

    reader.onload = function() {
        console.log(btoa(reader.result));
    };
    reader.onerror = function() {
        console.log('there are some problems');
    };
}