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

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

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

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

提前致谢！

实现 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 https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

此代码显示了读取文件的基础知识，文件本身被拖到文本区域中，我认为，这是一个比必须通过选择文件机制更好的界面，但这些机制同样可以很好地选择要读取的文件。

这是我对类似问题的回答：使用javascript获取文本文件内容 https://stackoverflow.com/questions/16922945/get-text-file-content-using-javascript