从输入表单获取 Base64 编码文件数据 [英] Get Base64 encode file-data from Input Form

问题描述

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

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

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 编码的字符串，它应该只上传 peachy.如果您想在推送前仔细检查，请尝试此操作:

  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

  这篇关于从输入表单获取 Base64 编码文件数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！