从输入表单获取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方法上返回错误？(或空字符串)

var encoded = Base64.encode(file); 

Answer 1

这完全有可能在浏览器端的JavaScript.

简单的方法:

该readAsDataURL()方法可能已经对其进行编码为base64为您服务.你可能需要去除开始的东西(直到第一个),但这并不重要.这会带来所有的乐趣.

困难的方式:

如果你想以艰难的方式尝试(或者它不起作用),请看readAsArrayBuffer().这将为您提供Uint8Array,您可以使用指定的方法.这可能仅在您想要混淆数据本身时才有用,例如在上传之前操纵图像数据或执行其他巫毒魔法.

有两种方法:

• 转换为字符串并使用内置btoa或类似的
  • 我没有测试过所有的情况,但对我有用 - 只需获取char代码
• 直接从Uint8Array转换为base64

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

我现在应该做什么:

从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文档:

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

Answer 2

我的解决方案是使用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 3

我使用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();
});

Answer 4

灵感来自@Josef 的回答：

const fileToBase64 = async (file) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = (e) => reject(e)
  })

const file = event.srcElement.files[0];
const imageStr = await fileToBase64(file)

Answer 5

完整示例

Html文件输入

<style>
.upload-button {
  background-color: grey;
}

.upload-button input{
  display:none;
}
</style>
<label for="upload-photo" class="upload-button">
    Upload file
    <input
     type="file"
     id="upload-photo"
    </input>
</label>

JS 处理程序

document.getElementById("upload-photo").addEventListener("change", function({target}){
 if (target.files && target.files.length) {
      try {
        const uploadedImageBase64 = await convertFileToBase64(target.files[0]); 
        //do something with above data string 
      } catch() {
        //handle error
      }
    }
})

function convertFileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    // Typescript users: use following line
    // reader.onload = () => resolve(reader.result as string);
    reader.onerror = reject;
  });
}