Javascript，从输入文件读取并使用 XMLHttpRequest 上传

Question

这个问题已经有答案了:

Creating a BLOB from a Base64 string in JavaScript (15 个回答)

已关闭 6 年前。

抱歉我的英语不好。我需要上传由输入文件选择的文件(.exe):

<input type="file" id="myfile">

像这样阅读(Javascript):

var myfile='';
var input = document.getElementById('myfile');
input.onchange = function(evt){
    var tgt = evt.target || window.event.srcElement, files = tgt.files;
    if (FileReader && files && files.length) {
            var fr = new FileReader();
            fr.onload = function(){
                myfile = fr.result;
            }
        fr.readAsDataURL(files[0]);
        }
}

现在我有变量“myfile”，例如:

"data:application/msdownload;base64,0J/RgNC40LLQtdGCINC80LjRgCE= .... etc."

在base64部分中，我有我选择的源文件。当我尝试上传文件时，该文件的编码和大小发生更改，并且文件已损坏。做错了什么？

上传代码:

    var fd = new FormData();
    var b = new Blob([atob(decodeURIComponent((myfile).split(',')[1]))],{type: 'application/msdownload'});
    fd.append('file', b, "myfile.exe");
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://myserver/");
    xhr.send(fd);

文件上传正常。但是当我下载该文件时，该文件已损坏...编码和大小已更改。

我尝试设置不同的标题，如下所示:

xhr.setRequestHeader("Content-Type", "charset=windows-1251"); 
.............
xhr.setRequestHeader("Content-Type", "charset=utf-8");

等等......但什么都没有改变...

我可以在没有ajax的情况下上传我的文件，但我需要在本地保存该文件......并在操作后从变量上传它。

简而言之:

我有一个以 Base64 编码的字符串，如下所示:

0J/RgNC40LLQtdGCINC80LjRgCE=

嗯，我知道这个字符串是文件“SecretFile.exe”的源。我想使用 javascript 解码并上传该文件。使用标准 window.atob 解码的字符串与原始文件源不相等。如何正确解码此文件(在 FileReader 中通过 Base64 编码)。

谢谢。

Answer 1

您不必将文件读取为数据字符串，然后将其转换为 Blob 。任何 File 对象(例如从 <input type="file" /> 元素获得的对象)也将是 Blob ，所以你可以直接将其传递给 fd.append .

如果您需要操纵 File上传对象之前，您应该使用 FileReader 的 readAsArrayBuffer 方法，它会给你一个 ArrayBuffer 您可以直接操作，然后只需使用 new Blob([ arrayBuffer ]) 创建一个 blob上传之前。