如何将本地文本文件上传到textarea(在网页内)

时间:2013-06-20 01:51:38

标签: javascript jquery html

我是一名新手程序员,需要一些帮助,找出如何将本地文本文件上传到我正在构建的网站内的文本区域。我非常流利的HTML / CSS,我对Javascript / JQuery有很好的了解,我只是在学习PHP。你能给予的任何帮助我都会非常感激。我有一个type =“file”和name =“file”的输入,我有一个带有“.textbox”类的textarea,我有一个运行“Upload()”函数的按钮这是我的javascript站点。

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

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

提前致谢!

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:-1)

我认为

会很好

使用iframe上传文件,为您提供类似用户体验的Ajax,就像Gmail一样,

然后使用php

读取文件的内容

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

这有意义吗?