从输入表单中获取 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 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);

原文由 jordan.baucke 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

简单的方法：

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

艰难的道路：

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

有两种方法：

• 转换为字符串并使用内置的 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

原文由 beatgammit 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

那么为什么不同意系统用户从已知文件夹中选择图像呢？或者他们可以为图像设置他们的选择文件夹。

大多数浏览器不支持完整路径，但您可以获得文件名，例如“image.png”

使用 PHP 内置函数进行编码：

 @$picture_base64 = base64_encode( file_get_contents($image_file_name) );

如果找不到路径，则符号 @ 将抑制错误，但结果将是变量 $picture_base64 的空值，所以我猜你可以使用空值，就像我一样，在继续之前检查空值。

在 html 中，您可以为输入选择图像文件名，例如“image.png”（但不是完整路径）

 <input type="file" name="image" id="image" >

然后在PHP中你可以这样做：

 $path = "C:\\users\\john\\Desktop\\images\\"
 @$picture_base64 = base64_encode( file_get_contents( $path. $_POST['image']);

然后 $picture_base64 将类似于

"AQAAAAMAAAAHAAAADwAAAB8AAAA/AAAAfwAAAP8AAAD/AQAA/w"

原文由 Ishmael Mavor Raines 发布，翻译遵循 CC BY-SA 4.0 许可协议