4

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

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

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

提前致谢！

4

2 回答 2

3

实现 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

于 2013-06-20T06:33:29.980 回答
-1

I think it will be good to

upload the file using iframe which gives you a ajax like user experience is what Gmail doing,

and then read the contents of the file using php

then send the contents back through ajax then append to textarea using js.

Does this makes sense?

于 2013-06-20T06:16:43.243 回答