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

Question

我有一个基本的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 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中受支持？

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

var encoded = Base64.encode(file);

Answer 1

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

简单的方法：

该readAsDataURL（）方法可能已经对其进行编码为base64为您服务。您可能需要删除开始的内容（直到第一个，），但这没什么大不了的。这将带走所有的乐趣。

困难的方法：

如果您想尝试一下困难的方法（或者不起作用），请参阅readAsArrayBuffer()。这将为您提供一个Uint8Array，您可以使用指定的方法。仅在您想弄乱数据本身（例如在上载之前处理图像数据或进行其他伏都教具魔术）时，这才可能有用。

有两种方法：

• 转换为字符串并使用内置的btoa或类似的
  • 我还没有测试所有情况，但是对我有用-只需获取字符代码
• 直接从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);

这会将其下载为文件。