在html中读取上传的文本文件内容答案

【问题标题】：Reading uploaded text file contents in html在html中读取上传的文本文件内容
【发布时间】：2015-10-23 04:07:57
【问题描述】：

我想用html显示上传文件的内容，我可以上传一个文本文件。我的example.html：

<html xmlns="http://www.w3.org/1999/xhtml" >
<p>
Please specify a file, or a set of files:<br>
<input type="file" name="datafile" size="40">
</p>

<textarea id="2" name="y" style="width:400px;height:150px;"></textarea>
</html>

如何在如下所示的 textarea 中显示任何上传的文本文件的内容？

【问题讨论】：

试试这个stackoverflow.com/questions/12371970/…

标签： javascript html file file-upload

【解决方案1】：

试试这个。

HTML

<p>
Please specify a file, or a set of files:<br>
<input type="file" id="myFile" multiple size="50" onchange="myFunction()">
</p>

<textarea id="demo" style="width:400px;height:150px;"></textarea>

function myFunction(){
    var x = document.getElementById("myFile");
    var txt = "";
    if ('files' in x) {
        if (x.files.length == 0) {
            txt = "Select one or more files.";
        } else {
            for (var i = 0; i < x.files.length; i++) {
                txt += (i+1) + ". file";
                var file = x.files[i];
                if ('name' in file) {
                    txt += "name: " + file.name + "";
                }
                if ('size' in file) {
                    txt += "size: " + file.size + " bytes ";
                }
            }
        }
    } 
    else {
        if (x.value == "") {
            txt += "Select one or more files.";
        } else {
            txt += "The files property is not supported by your browser!";
            txt  += "The path of the selected file: " + x.value; // If the browser does not support the files property, it will return the path of the selected file instead. 
        }
    }
    document.getElementById("demo").innerHTML = txt;
}

Demo

【讨论】：

这有效但错误。它给出了文件的属性而不是文件的内容（如果 file.txt 包含“2 3 4”它应该给出“2 3 4”）。
输出没有回答问题，它给出了文件类型和文件大小
不回答试图读取文件内容的问题。
问题是读取文件内容而不是文件信息或文件大小..您的代码没有给出文件内容

【解决方案2】：

这是一种方法：

HTML

<tr>
    <td>Select a File to Load:</td>
    <td><input type="file" id="fileToLoad"></td>
    <td><button onclick="loadFileAsText()">Load Selected File</button><td>
</tr>

JavaScript

function loadFileAsText(){
  var fileToLoad = document.getElementById("fileToLoad").files[0];

  var fileReader = new FileReader();
  fileReader.onload = function(fileLoadedEvent){
      var textFromFileLoaded = fileLoadedEvent.target.result;
      document.getElementById("inputTextToSave").value = textFromFileLoaded;
  };

  fileReader.readAsText(fileToLoad, "UTF-8");
}

【讨论】：

请注意，您的 html 中没有任何名为 inputTextToSave 的元素。
帮助我完成了一个 bacbone.js 应用程序
我尝试了这个解决方案，但它无法编译并出现错误：property result does not exist on type EventTarget 注意：我正在使用 typescript

【解决方案3】：

我从谷歌来到这里，很惊讶地发现没有工作示例。

你可以用FileReader API和cross-browser support阅读文件。

const reader = new FileReader()
reader.onload = event => console.log(event.target.result) // desired file content
reader.onerror = error => reject(error)
reader.readAsText(file) // you could also read images and other binaries

请参阅下面的完整工作示例。

document.getElementById('input-file')
  .addEventListener('change', getFile)

function getFile(event) {
	const input = event.target
  if ('files' in input && input.files.length > 0) {
	  placeFileContent(
      document.getElementById('content-target'),
      input.files[0])
  }
}

function placeFileContent(target, file) {
	readFileContent(file).then(content => {
  	target.value = content
  }).catch(error => console.log(error))
}

function readFileContent(file) {
	const reader = new FileReader()
  return new Promise((resolve, reject) => {
    reader.onload = event => resolve(event.target.result)
    reader.onerror = error => reject(error)
    reader.readAsText(file)
  })
}

label {
  cursor: pointer;
}

textarea {
  width: 400px;
  height: 150px;
}

<div>
 <label for="input-file">Specify a file:</label><br>
 <input type="file" id="input-file">
</div>

<textarea id="content-target"></textarea>

【讨论】：

这太好了，谢谢。我正在尝试使用 php 将文件与一些用户输入的数据一起上传到服务器。因此，用户选择一个包含一些数据的文件，然后写入一些内容（即时间、日期、序列号），然后单击上传，这是服务器上的一个文件。我认为您的回答将帮助我以另一种方式实施。
> "一个文件到服务器以及一些用户输入的数据" — 对于这个任务，使用多部分形式似乎更自然：stackoverflow.com/questions/1075513/…