如何将本地文本文件上传到文本区域（网页内）答案

【问题标题】：How to upload a local text file to a textarea (inside the webpage)如何将本地文本文件上传到文本区域（网页内）
【发布时间】：2013-06-20 14:33:29
【问题描述】：

我是一名新手程序员，需要一些帮助来弄清楚如何将本地文本文件上传到我正在构建的网站内的文本区域。我非常精通 HTML/CSS，我对 Javascript/JQuery 有相当的了解，而且我正在学习 PHP。您可以提供的任何帮助我将不胜感激。我有一个 type="file" 和 name="file" 的输入，我有一个带有“.textbox”类的文本区域，我有一个运行函数“Upload()”的按钮这是我的 javascript网站。

var localfile = $("input[name=textfile]").val();

function Upload(){
  $(".textbox").append(file);
}

提前致谢！

【问题讨论】：

更正输入的名称为“textfile”
“上传”？你的意思是下载吗？
我可能会在后端 (PHP) 上执行此操作，因为如果您在前端执行此操作，它需要浏览器支持 HTML5 文件 API。长话短说，您可以通过表单上传文件，然后让表单处理程序解析它，然后在视图中显示文件内容。查看一些非常基本的文件处理示例：tizag.com/phpT/fileread.php
使用 Flash 的理论 -1：完全不合适的解决方案。
@ŠimeVidas 我只是基于这样一个事实提出这个建议，即 OP 似乎并没有牢牢掌握 JS 可以对文件做什么。 #YouAreAJerkBro

标签： javascript jquery html

【解决方案1】：

实现 FileReader 的现代浏览器可以做到这一点。要测试您的浏览器，请检查是否定义了 window.FileReader。

这是我几天前写的一些代码来做这件事。在我的例子中，我只是将一个文件拖到 HTML 元素上，这里引用为 panel.in1，但您也可以使用（参见下面的参考）。

if (window.FileReader) {
  function dragEvent (ev) {
    ev.stopPropagation (); 
    ev.preventDefault ();
    if (ev.type == 'drop') {
      var reader = new FileReader ();
      reader.onloadend = function (ev) { panel.in1.value += this.result; };
      reader.readAsText (ev.dataTransfer.files[0]);
    }  
  }

  panel.in1.addEventListener ('dragenter', dragEvent, false);
  panel.in1.addEventListener ('dragover', dragEvent, false);
  panel.in1.addEventListener ('drop', dragEvent, false);
}

reader.onloadend 函数将您在事件处理程序中恢复的文件文本作为 this.result 获取。

我从 MDN 获得了有关如何执行此操作的大部分机制：https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

这段代码显示了读取文件的基础知识，文件本身被拖到文本区域，我认为界面更好，而不是必须通过选择文件机制，但是选择文件的效果同样好阅读。

这是我对类似问题的回答：Get text file content using javascript

【讨论】：

【解决方案2】：

我觉得会很好

使用 iframe 上传文件，从而为您提供类似 ajax 的用户体验，这就是 Gmail 所做的，

然后使用php读取文件内容

然后通过ajax发回内容，然后使用js追加到textarea。

这有意义吗？

【讨论】：

这不是 gmail 正在做的事情。
如果您不知道，我很抱歉。我见过 Gmail 使用 iframe 上传文件，因为 ajax 不支持 multipart/form-data 给用户一个动态的 ajax 体验。不确定当前的 gmail 版本。不再使用..
Ajax 确实支持多部分/表单数据。也许您应该花一些时间来更新您的知识，然后再发布有关此主题的答案。
非常感谢。这是我在互联网上读到的。我没有像你这样的传奇教我。我试着帮忙。我不会再在这个网站上这样做了；）