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

但这只会在base64编码之前在UTF_8方法上返回en错误？（或空字符串）

var encoded = Base64.encode(file); 

Answer 1

我的解决办法是使用readAsBinaryString()和btoa()它的结果。uploadFileToServer(event) {&nbsp; &nbsp; var file = event.srcElement.files[0];&nbsp; &nbsp; console.log(file);&nbsp; &nbsp; var reader = new FileReader();&nbsp; &nbsp; reader.readAsBinaryString(file);&nbsp; &nbsp; reader.onload = function() {&nbsp; &nbsp; &nbsp; &nbsp; console.log(btoa(reader.result));&nbsp; &nbsp; };&nbsp; &nbsp; reader.onerror = function() {&nbsp; &nbsp; &nbsp; &nbsp; console.log('there are some problems');&nbsp; &nbsp; };}

Answer 2

单击文件上传按钮时，我使用FileReader来显示图像，而不使用任何Ajax请求。以下是该代码希望对您有所帮助的代码。$(document).ready(function($) {&nbsp; &nbsp; $.extend( true, jQuery.fn, {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; imagePreview: function( options ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var defaults = {};&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if( options ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.extend( true, defaults, options );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.each( this, function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var $this = $( this );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $this.bind( 'change', function( evt ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var files = evt.target.files; // FileList object&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Loop through the FileList and render image files as thumbnails.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0, f; f = files[i]; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Only process image files.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!f.type.match('image.*')) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; continue;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var reader = new FileReader();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Closure to capture the file information.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader.onload = (function(theFile) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return function(e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Render thumbnail.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#imageURL').attr('src',e.target.result);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })(f);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Read in the image file as a data URL.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader.readAsDataURL(f);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;&nbsp; &nbsp; });&nbsp; &nbsp; $( '#fileinput' ).imagePreview();});