将 .txt 文件放入 textarea答案

【问题标题】：Put .txt file in a textarea将 .txt 文件放入 textarea
【发布时间】：2015-03-19 15:27:03
【问题描述】：

我有这个文本区域：

<input id="inputOuvrirFichier" type="file" onchange="handleFiles(this.files)" name="files[]" accept=".txt">

我需要将 .txt 文件的内容放入此文本区域。这是我的功能：

function handleFiles(file){
document.getElementById("titre").click();
console.log(file);}

请问如何获取文件中包含的文本？ (Javascript) 谢谢。

【问题讨论】：

您可能会想先读取服务器上的文件（使用 PHP），然后通过 AJAX 将其返回。
可以在现代浏览器中使用FileReader API

标签： javascript file input

【解决方案1】：

JS，无法访问你服务器上的本地，只能抛出ajax-request：

function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                $('#inputOuvrirFichier').text(allText)
            }
        }
    }
    rawFile.send(null);
}

【讨论】：

谢谢，我不明白它是如何工作的，你能解释一下吗？
你向服务器（XMLHttpRequest）发出请求到你的文件，然后我在文件“加载”时读取它。 rawFile - 请求。 rawFile.responseText = 请求的结果。
"XMLHttpRequest 无法加载 file:///C:/PROJET-SKI/[object%20FileList]。跨源请求仅支持协议方案：http、data、chrome、chrome-extension、 https，铬扩展资源。”我不能在本地使用它？
你必须使用你的网络服务器的路径（比如 localhost:3000/public/file.txt）
你的本地机器上有网络服务器吗？ MAMP？阿帕奇？类似的东西，或者你只是在浏览器中打开 .html 文件？

【解决方案2】：

您可以使用FileReader API

function handleFiles(files) {
  var i = 0;
  var reader = new FileReader();
  reader.onload = function() {
    i++;
    document.getElementById('result').innerHTML += this.result;
    if (i < files.length)
      reader.readAsText(files[i])
  };
  reader.readAsText(files[0]);
}

<input id="inputOuvrirFichier" type="file" onchange="handleFiles(this.files)" name="files[]" accept=".txt" multiple="">
<div id="result"></div>

【讨论】：