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

Question

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

未捕获的TypeError：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>

这是我的变量：

                var sendfButton = document.getElementById("send-file-button");
            var fileInput = document.getElementById("myfileinput");

这是我的点击事件处理程序：

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");
                    } 
                }

当我直接运行代码时似乎起作用，但是在按钮事件处理程序内部将其激活时却无效。代码2我添加了FileReader，但仍然存在错误：

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");
                    } 
                }

返回未定义

Answer 1

File.getAsText()方法已过时。 File对象是Blob的一种特定类型，因此可以改用Blob.text()方法。用file.getAsText()替换代码中的await file.text()。

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

var button = document.getElementById("send-file-button");
var fileInput = document.getElementById("myfileinput");
var output = document.getElementById("output");

button.onclick = function () {
  var files = fileInput.files;
  var reader = new FileReader();
  reader.onload = function () {
    output.innerText = reader.result;
  };
  if(files[0]) {
    // This does not return the text. It just starts reading.
    // The onload handler is triggered when it is done and the result is available.
    reader.readAsText(files[0]);
  }
};

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