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

Javascript, read from input file and upload with XMLHttpRequest

本文关键字：XMLHttpRequest 上传 读取 输入 文件 Javascript      更新时间：2023-09-26

对不起，我的英语不好。我需要上传我的文件(.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);

文件上传OK。但是当我下载这个文件时，这个文件已经损坏了…编码和大小已更改

我试着像这样设置不同的头:

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

等等……但一切都没有改变……

我可以上传我的文件没有ajax，但我需要保存这个文件本地…操作后从变量上传。

简而言之:

我有一个Base64编码的字符串，像这样:

0J/RgNC40LLQtdGCINC80LjRgCE=

嗯，我知道这个字符串是文件"SecretFile.exe"的来源。我想解码和上传这个文件使用javascript。标准窗口。解码后的字符串不等于原始文件源。如何正确解码这个文件，在FileReader中使用Base64编码。

谢谢。

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

如果您需要在上传之前操作File对象，您应该使用FileReader的readAsArrayBuffer方法，它为您提供了一个可以直接操作的ArrayBuffer，然后在上传之前简单地使用new Blob([ arrayBuffer ])创建一个blob。

相关文章：