文件未加载到 HTML 文本区域答案

【问题标题】：files not loading in HTML text area文件未加载到 HTML 文本区域
【发布时间】：2019-04-15 17:23:36
【问题描述】：

我正在尝试从已存在文件的 file/JOHN 目录加载 3 个文件。

文件采用以下格式。假设它们位于以下位置（在file/JOHN 文件夹内）：C:/john/file/JOHN/

file1_1555077233.csv
file2_1555077233.csv 
file3_1555077233.csv

因为我是在我的 Windows 机器上测试它，所以我将它放在这个位置 C:/john/file/JOHN/。但是，最终，在 RHEL 服务器上，它会变成这样的/srv/users/JOHN/，所以我使用 Windows 机器上的用户目录来进行测试。

文件未显示在文本区域中。但是，一旦我单击按钮，文本区域会在 1 秒后显示。我做错了什么？

点击Download File 按钮后，下面的代码会在 1 秒后显示一个文本区域。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8"/>
    <title>LoadFiles</title>
    <link rel="stylesheet" href="built/style.css"/>
    <script type="text/javascript">
        var interval;
        function loadFiles() {
            interval = setInterval(displayTextArea, 1000);


        }
        function displayTextArea() {
              console.log(new Date() + " ");

              document.getElementById("downloadtextArea").innerHTML =
                 '<textarea maxlength="500" cols="30" rows="5"></textarea>'; 


                const requests = [
                  'file1_1555077233.csv',
                  'file2_1555077233.csv ',
                  'file3_1555077233.csv'
                ].map(file => {

                 return fetch('file:///C:/john/file/JOHN/' + file)
                    .then(response => response.text())
                    .catch(console.error)
                })

                Promise.all(requests)
                  .then(contents => contents.join('\n'))
                  .then(content => {

                    //container.innerHTML = `<textarea>${content}</textarea>`
                    content.innerHTML = `<textarea>${content}</textarea>`
                  })


                clearInterval(interval);




            }






    </script>
</head>
<body>


<button id="downloadFileButton" onclick="loadFiles()">Download File</button>
<div id ="downloadtextArea"></div>


</body>
</html>

我执行的故障排除步骤：

在浏览器中复制如下路径：

file:///C:/john/file/JOHN/file1_1555077233.csv 我看到了文件

【问题讨论】：

console.log(contents)你看到了什么
@IsaacVidrine 我看到列名打印了 3 次，它们出现在 CSV 文件 "Column1","Column2","Column3","Column4" 中。我在这一行上方使用了`console.log(content);`content.innerHTML = ${content}``
content 是来自响应的数据，所以content.innerHTML 当然什么也不做。你需要类似document.getElementById('mycontentarea').innerHTML = content
@Issac Vidrine 好的。你能告诉我你到底要我在上面的代码中把console.log(contents) 放在哪里吗？另外，这个document.getElementById('mycontentarea').innerHTML = content 应该去哪里？谢谢
content 是您请求加载文件的响应。您应该注销它们的值以查看它们是什么。获得所需数据后，将该数据附加到页面上的标记中。

标签： javascript html file textarea

【解决方案1】：

您正在尝试在响应数据上设置innerHTML，而不是在DOM 元素上。

在您的displayTextArea() 函数中：

function displayTextArea() {
  console.log(new Date() + " ");
  const requests = [
    'file1_1555077233.csv',
    'file2_1555077233.csv ',
    'file3_1555077233.csv'
  ].map(file => {
    return fetch('file:///C:/john/file/JOHN/' + file)
    .then(response => response.text())
    .catch(console.error)
  })

  Promise.all(requests)
  .then(contents => contents.join('\n'))
  .then(content => {
    document.getElementById('downloadtextArea').innerHTML = `<textarea>${content}</textarea>`
  })
}

【讨论】：

谢谢。这有效，但它在文本区域中显示文件的内容。我相信3次。是否可以在文本区域中只显示 3 个文件？
不是你想要在文本区域中显示文件的内容吗？
不。我想在文本区域内显示 3 个文件。在此之后，我将实现一个功能，用户可以单击一个按钮（将与文本区域一起显示）并以 zip 格式下载文件。
你想显示 3 个文件是什么意思？内容就是这样。你是说你只想显示他们的名字吗？请更具体地说明问题。
我想在文本区域显示file1_1555077233.csv、file2_1555077233.csv和file3_1555077233.csv。不是所有三个文件的内容。因为，我计划在文本区域下方有一个按钮，当用户单击该按钮时，这 3 个文件将被转换为 zip 格式，用户可以保存它。这就是我的计划。如果我能回答更多问题，请告诉我。谢谢

【解决方案2】：

文本区域在 1 秒后显示的原因是您在 loadfiles() 方法中设置了 1 秒的间隔。

您能否指定单击“下载”按钮后控制台中显示的错误？是否低于错误？ Fetch API 无法加载 file:///C:/john/file/JOHN/file1_1555077233.csv。对于 CORS 请求，URL 方案必须是“http”或“https”。

【讨论】：

感谢@VrushtiJoshi。在我进行了 Issac 在下面的回答中提到的更改后，它正在加载文件的内容。但是，我想在文本区域中加载 3 个文件。我已经在我的 Firefox 中使用 about:config 选项禁用了 CORS 功能以进行测试，因为最终我将在 RHEL 服务器上获取这些文件。