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

所以我必须替换为:


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); 


莫回无
浏览 782回答 3
3回答

侃侃尔雅

我的解决办法是使用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; };}

四季花海

单击文件上传按钮时,我使用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();});
打开App,查看更多内容
随时随地看视频慕课网APP