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

    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 2

单击文件上传按钮时，我使用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();

});