在JavaScript中将文件输入转换为文本

我正在编写一个简单的JavaScript页面，从用户那里获取一个文件，并将其转换为二进制或文本的数据变量。当我在按钮的click事件处理程序中使用代码时，会出现以下错误：

未捕获类型错误：file.getAsText不是HTMLButtonElement.sendfButton.onclick的函数

首先我浏览并选择一个文件，然后点击发送按钮

这是我的html输入和按钮：

            <tr>
            <td>
                <button type="button" class="control-button" id="send-file-button">SEND-FILE</button> 
            </td>
            <td>
                    <input type='file' id='myfileinput' multiple><br>
                    <div id='output'>


            </td>
        </tr>

下面是我的click事件处理程序：

sendfButton.onclick = function ()
                {
                var files = fileInput.files;
                var accept = {
                binary : ["image/png", "image/jpeg"],
                text   : ["text/plain", "text/css", "application/xml", "text/html" , "text/txt"]
                };
                var file;
                    if (conn && conn.open)
                    {
                        console.log('in1');
                         //convert a file to bytes then send it
                        for (var i = 0; i < files.length; i++)
                        {
                            console.log('in2');
                            file = files[i];
                            // if file type could be detected
                            if (file !== null) 
                            {
                                console.log('in3');
                                if (accept.binary.indexOf(file.type) > -1) 
                                {
                                    console.log('in binary');
                                    // file is a binary, which we accept
                                    var data = file.getAsBinary();
                                    console.log(data + 'dtat');
                                } 
                                else if (accept.text.indexOf(file.type) > -1) 
                                {
                                    console.log('in text');
                                // file is of type text, which we accept
                                var data = file.getAsText();
                                console.log(data + 'dqata');
                                // modify data with string methods
                                }
                            }
                        }

                        console.log('out' + data);
                        conn.send(data);
                        console.log("fSent: " + data);
                        addMessage("<span class=\"selfMsg\">Self: </span> " + data);
                    }
                    else
                    {
                        console.log("failed fsend");
                    } 
                }

sendfButton.onclick=函数（）
{
var files=fileInput.files；
变量接受={
二进制文件：[“图像/png”、“图像/jpeg”]，
text:[“text/plain”、“text/css”、“application/xml”、“text/html”、“text/txt”]
};
var文件；
如果（连接和连接打开）
{
console.log（'in1'）；
//将文件转换为字节，然后发送
对于（var i=0；i-1）
{
log（'in binary'）；
//文件是二进制文件，我们接受它
var data=file.getAsBinary（）；
console.log（数据+dtat'）；
} 
else if（accept.text.indexOf（file.type）>-1）
{
console.log（'in text'）；
//文件类型为文本，我们接受
var data=file.getAsText（）；
console.log（数据+'dqata'）；
//使用字符串方法修改数据
}
}
}
console.log（'out'+数据）；
连接发送（数据）；
控制台日志（“fSent:+数据）；
addMessage（“Self:+数据”）；
}
其他的
{
console.log（“失败的fsend”）；
} 
}

当我直接运行代码时，它似乎起作用，但当它在按钮事件处理程序中被激活时，它就不起作用了。 代码2 我添加了filereader，但仍然存在一个bug：

sendfButton.onclick = function ()
                {
                var files = fileInput.files;
                var accept = {
                binary : ["image/png", "image/jpeg"],
                text   : ["text/plain", "text/css", "application/xml", "text/html" , "text/txt"]
                };
                var file;
                    if (conn && conn.open)
                    {
                        console.log('in1');
                         //convert a file to bytes then send it
                        for (var i = 0; i < files.length; i++)
                        {
                            console.log('in2');
                            file = files[i];
                            var readers = new FileReader();
                            // if file type could be detected
                            if (file !== null) 
                            {
                                console.log('in3');
                                if (accept.binary.indexOf(file.type) > -1) 
                                {
                                    console.log('in binary');
                                    // file is a binary, which we accept
                                    var data = readers.readAsBinaryString(file);
                                    console.log(data + 'dtat');
                                } 
                                else if (accept.text.indexOf(file.type) > -1) 
                                {
                                    console.log('in text');
                                // file is of type text, which we accept
                                var data = readers.readAsText(file);
                                console.log(data + 'dqata');
                                // modify data with string methods
                                }
                            }
                        }

                        console.log('out' + data);
                        conn.send(data);
                        console.log("fSent: " + data);
                        addMessage("<span class=\"selfMsg\">Self: </span> " + data);
                    }
                    else
                    {
                        console.log("failed fsend");
                    } 
                }

sendfButton.onclick=函数（）
{
var files=fileInput.files；
变量接受={
二进制文件：[“图像/png”、“图像/jpeg”]，
text:[“text/plain”、“text/css”、“application/xml”、“text/html”、“text/txt”]
};
var文件；
如果（连接和连接打开）
{
console.log（'in1'）；
//将文件转换为字节，然后发送
对于（var i=0；i-1）
{
log（'in binary'）；
//文件是二进制文件，我们接受它
var data=readers.readAsBinaryString（文件）；
console.log（数据+dtat'）；
} 
else if（accept.text.indexOf（file.type）>-1）
{
console.log（'in text'）；
//文件类型为文本，我们接受
var data=readers.readAsText（文件）；
console.log（数据+'dqata'）；
//使用字符串方法修改数据
}
}
}
console.log（'out'+数据）；
连接发送（数据）；
控制台日志（“fSent:+数据）；
addMessage（“Self:+数据”）；
}
其他的
{
console.log（“失败的fsend”）；
} 
}

它回来了 未定义

文件.getAsText（）方法已过时。File对象是Blob的一种特定类型，因此可以使用

Blob.text（）

方法。将代码中的

file.getAsText（）

替换为

wait file.text（）

编辑：另一个具有更好浏览器支持的选项是使用。您的代码如下所示：

var-button=document.getElementById（“发送文件按钮”）；
var fileInput=document.getElementById（“myfileinput”）；
var output=document.getElementById（“输出”）；
button.onclick=函数（）{
var files=fileInput.files；
var reader=new FileReader（）；
reader.onload=函数（）{
output.innerText=reader.result；
};
如果（文件[0]）{
//这不会返回文本。它只是开始阅读
sendfButton.onclick = function ()
                {
                var files = fileInput.files;
                var accept = {
                binary : ["image/png", "image/jpeg"],
                text   : ["text/plain", "text/css", "application/xml", "text/html" , "text/txt"]
                };
                var file;
                    if (conn && conn.open)
                    {
                        console.log('in1');
                         //convert a file to bytes then send it
                        for (var i = 0; i < files.length; i++)
                        {
                            console.log('in2');
                            file = files[i];
                            var readers = new FileReader();
                            // if file type could be detected
                            if (file !== null) 
                            {
                                console.log('in3');
                                if (accept.binary.indexOf(file.type) > -1) 
                                {
                                    console.log('in binary');
                                    // file is a binary, which we accept
                                    var data = readers.readAsBinaryString(file);
                                    console.log(data + 'dtat');
                                } 
                                else if (accept.text.indexOf(file.type) > -1) 
                                {
                                    console.log('in text');
                                // file is of type text, which we accept
                                var data = readers.readAsText(file);
                                console.log(data + 'dqata');
                                // modify data with string methods
                                }
                            }
                        }

                        console.log('out' + data);
                        conn.send(data);
                        console.log("fSent: " + data);
                        addMessage("<span class=\"selfMsg\">Self: </span> " + data);
                    }
                    else
                    {
                        console.log("failed fsend");
                    } 
                }