javascript - 通过文件打开复制文本文件的文本内容

Question

我的项目类似于基于 C++ Web 的 IDE，我正在处理其打开按钮，该按钮将打开一个文本文件并将文本附加到其 contenteditable div 中。当我点击选择文件按钮时，我想要

1. 获取所选文本文件的内容，就像剪贴板复制一样

2. 将复制的文本附加到 contenteditable div，就像粘贴一样

   2.1 提供了 setCaret 函数，它将在 contenteditable div 的开头设置插入符位置

   2.2提供了pasteTextAtCaret函数，它将开始在当前插入符位置粘贴事件

我希望它像复制和粘贴事件一样工作，因为此事件不会导致我的代码出现错误并节省调试时间。

function readSingleFile(evt) {

            var f = evt.target.files[0];
            console.log(f);

            if (!f) {
                alert("Failed to load file");
                   return;
            } 

            if (f.name.indexOf('.txt') == -1) {
                alert(f.name + " is not a valid text file.");
                return;     
            }    

            var r = new FileReader();
            r.onload = function(e) { 

            setCaret(false, 0);
                    //copy here
            pasteTextAtCaret(copied_text);



          }
          r.readAsText(f);
}

function setCaret(colPosition, divPos) {
            alert('calllled');
            var range = document.createRange();
            var sel = window.getSelection();
            range.selectNodeContents($('#board')[divPos]);
            range.collapse(colPosition);
            sel.removeAllRanges();
            sel.addRange(range);//setting the caret position
}    

function pasteTextAtCaret(text) {
            alert('pasted');
            var sel, range;
            if (window.getSelection) {
                sel = window.getSelection();
                if (sel.getRangeAt && sel.rangeCount) {
                    range = sel.getRangeAt(0);
                    range.deleteContents();

                    var textNode = document.createTextNode(text);
                    range.insertNode(textNode);

                    range = range.cloneRange();
                    range.setStartAfter(textNode);
                    range.collapse(false);
                    sel.removeAllRanges();
                    sel.addRange(range);                    

                }//if
            }//if 

            else if (document.selection && document.selection.type != "Control") {
                document.selection.createRange().text = text;
            }//else if
}

document.getElementById('fileinput').addEventListener('change', readSingleFile, false);

http://jsfiddle.net/88vtR/26/

Answer 1

或者只是用 php 让它变得简单

<?php
$file = "YourFile.txt";
$read = file_get_contents($file);
echo $read;
?>