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

2022-01-21 00:00:00 file-upload base64 javascript html

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

I've got a basic HTML form from which I can grab a bit of information that I'm examining in Firebug.

我唯一的问题是我正在尝试base64在将文件数据发送到需要以该格式保存到的服务器之前对其进行编码数据库.

My only issues is that I'm trying to base64 encode the file data before it's sent to the server where it's required to be in that form to be saved to the database.

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

在 Javascript+jQuery 中:

And in Javascript+jQuery:

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

我有一些基于可用javascript的操作:.getAsBinary(), .getAsText(), .getAsTextURL

I have some operations based on available javascript: .getAsBinary(), .getAsText(), .getAsTextURL

但是，这些都不会返回可以插入的可用文本，因为它们包含 不可用的字符" - 我不想在上传的文件中出现回发"，我需要有多种针对特定对象的表单，因此我获取文件并以这种方式使用 Javascript 很重要.

However none of these return usable text that can be inserted as they contain unusable 'characters' - I don't want to have a 'postback' occur in my file uploaded, and I need to have multiple forms targeting specific objects so it's important I get the file and use Javascript this way.

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

How should I get the file in such a way that I can use one of the Javascript base64 encoders that are widely available!?

这是我所在的位置:

<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>

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

Couple of issues with cross browser support:

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(但不能正确编码文件，或者至少在发布后文件不正确)

This works in Firefox, Chrome and, Safari (but doesn't properly encode the file, or at least after it's been posted the file doesn't come out right)

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

还有，

file.readAsArrayBuffer()

似乎只有 HTML5 支持?

Seems to be only supported in HTML5?

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

但这只会在 UTF_8 方法在 base64 编码之前返回错误?(或空字符串)

But this only returns an error on the UTF_8 method before it base64 encodes? (or an empty string)

var encoded = Base64.encode(file);

推荐答案

浏览器端的javascript完全可以.

It's entirely possible in browser-side javascript.

简单的方法:

readAsDataURL() 方法可能已经编码它为你的base64.您可能需要去掉开头的内容(直到第一个 ,)，但这没什么大不了的.不过，这会带走所有的乐趣.

The readAsDataURL() method might already encode it as base64 for you. You'll probably need to strip out the beginning stuff (up to the first ,), but that's no biggie. This would take all the fun out though.

艰难的道路:

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

If you want to try it the hard way (or it doesn't work), look at readAsArrayBuffer(). This will give you a Uint8Array and you can use the method specified. This is probably only useful if you want to mess with the data itself, such as manipulating image data or doing other voodoo magic before you upload.

有两种方法:

  • 转换为字符串并使用内置的 btoa 或类似的
    • 我没有测试所有案例，但对我有用 - 只需获取字符代码

    我最近在浏览器中实现了 tar.作为该过程的一部分，我制作了自己的直接 Uint8Array->base64 实现.我认为您不需要它，但它是 如果你想看看这里;挺好看的.

    I recently implemented tar in the browser. As part of that process, I made my own direct Uint8Array->base64 implementation. I don't think you'll need that, but it's here if you want to take a look; it's pretty neat.

    我现在做什么:

    从 Uint8Array 转换为字符串的代码非常简单(其中 buf 是 Uint8Array):

    The code for converting to string from a Uint8Array is pretty simple (where buf is a 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 编码的字符串，它应该只上传桃色.如果你想在推送前仔细检查，试试这个:

    Base64 will now be a base64-encoded string, and it should upload just peachy. Try this if you want to double check before pushing:

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

    这会将其下载为文件.

    其他信息:

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

    To get the data as a Uint8Array, look at the MDN docs:

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

相关文章