从输入表单获取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 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
但是在base64编码之前，这只会在UTF_8方法上返回一个错误？(或空字符串)
var encoded = Base64.encode(file); 回答 7
Stack Overflow用户
发布于 2011-08-08 16:14:17
这在浏览器端的javascript中是完全可能的。
简单的方式：
readAsDataURL()方法可能已经为您将其编码为base64。您可能需要去掉开头的部分(直到第一个,)，但这没什么大不了的。不过，这会把所有的乐趣都去掉。
艰难的之路：
如果你想试一试(或者它不能工作)，看看readAsArrayBuffer()。这将为您提供一个Uint8Array，您可以使用指定的方法。这可能只有在你想要弄乱数据本身的时候才有用，比如在你上传之前操纵图像数据或者做其他的巫术。
有两种方法：
- 转换为字符串，并使用内置的
btoa或类似的- 我还没有测试所有的情况，但对我来说是有效的-只需获取char-codes
- 直接从Uint8Array转换为base64
我最近实现了tar in the browser。作为该过程的一部分，我创建了自己的直接Uint8Array->base64实现。我不认为您需要它，但如果您想看一下，它是here；它非常整洁。
我现在做什么：
从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编码的字符串，并且它应该只上传peachy。如果你想在推流前仔细检查，可以试试这个：
window.open("data:application/octet-stream;base64," + base64);
这将以文件的形式下载它。
其他信息：
要获取Uint8Array形式的数据，请查看MDN文档：
Stack Overflow用户
发布于 2017-03-07 19:26:23
我的解决方案是对其结果使用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');
};
}Stack Overflow用户
发布于 2012-06-22 14:19:52
我使用FileReader在点击文件上传按钮时显示图像，而不使用任何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();
});https://stackoverflow.com/questions/6978156
复制相似问题