小编典典

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

javascript

我有一个基本的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);

阅读 445

收藏
2020-05-01

共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);

这会将其下载为文件。

2020-05-01