从input表单获取Base64编码文件数据

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

所以我必须replace为：

 var element = 'id'; var element = document.getElementById(id); 

对于IE支持。

这适用于Firefox，Chrome，Safari（但没有正确编码文件，或者至less在文件发布后文件不能正确显示）

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

也，

 file.readAsArrayBuffer() 

似乎只在HTML5中受支持？

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

但是这只会在base64编码之前在UTF_8方法上返回en错误？ （或者一个空string）

 var encoded = Base64.encode(file); 

Answer 1

在浏览器端JavaScript是完全可能的。

简单的方法：

readAsDataURL（）方法可能已经将它编码为base64。 你可能需要删除开始的东西（直到第一个），但这不是什么大问题。 这将尽可能的乐趣。

困难的方式：

如果你想尝试一下困难的方式（或者不行），请看readAsArrayBuffer() 。 这会给你一个Uint8Array，你可以使用指定的方法。 这可能只有在你想上传数据之前，才能处理数据本身，比如操纵图像数据或者做其他巫术魔术。

有两种方法：

• 转换为string，并使用内置的btoa或类似的
  • 我没有testing过所有的情况，但是为我工作，只是得到了字符代码
• 直接从Uint8Array转换为base64

我最近在浏览器中实现了tar 。 作为这个过程的一部分，我做了自己的直接Uint8Array-> base64实现。 我不认为你会需要这个，但是如果你想要看一下它就在这里 ; 它非常整齐。

我现在应该做什么：

从Uint8Array转换为string的代码非常简单（其中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编码的string，它应该只上传桃子。 尝试这个，如果你想在推之前仔细检查：

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

这将作为一个文件下载。

其他信息：

要将数据作为Uint8Array获取，请查看MDN文档：

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

Answer 2

我使用FileReader来显示点击file uploadbutton的图像，而不使用任何Ajax请求。 以下是代码希望它可以帮助一些。

 $(document).ready(function($) { $.extend( true, jQuery.fn, { imagePreview: function( options ){ var defaults = {}; if( options ){ $.extend( true, defaults, options ); } $.each( this, function(){ var $this = $( this ); $this.bind( 'change', function( evt ){ var files = evt.target.files; // FileList object // Loop through the FileList and render image files as thumbnails. for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); // Closure to capture the file information. reader.onload = (function(theFile) { return function(e) { // Render thumbnail. $('#imageURL').attr('src',e.target.result); }; })(f); // Read in the image file as a data URL. reader.readAsDataURL(f); } }); }); } }); $( '#fileinput' ).imagePreview(); }); 

Answer 3

我的解决scheme是在其结果上使用readAsBinaryString()和btoa() 。

 uploadFileToServer(event) { var file = event.srcElement.files[0]; console.log(file); var reader = new FileReader(); reader.readAsBinaryString(file); reader.onload = function() { console.log(btoa(reader.result)); }; reader.onerror = function() { console.log('there are some problems'); }; } 

Answer 4

在自己挣扎之后，我开始为支持它的浏览器（Chrome浏览器，Firefox和尚未发布的Safari 6）实现FileReader，以及一个将POST文件数据作为Base64编码数据回显给另一个的PHP脚本浏览器。

Answer 5

我已经开始认为，使用“iframe”进行Ajax风格上传可能是一个更好的select，直到HTML5来到完整的圈子，我不必在我的应用程序支持传统的浏览器！