Javascript FileReader()答案

【问题标题】：Javascript FileReader()Javascript FileReader()
【发布时间】：2015-05-22 06:28:12
【问题描述】：

我想使用javascript filereader()从另一个页面加载另一个页面，如何根据div指定函数的参数？

html代码：

<!DOCTYPE HTML>
<html>
<body>

    <div class='try1' onclick="openFile('test1.txt')">Show Test1</div>
    <div class='try2' onclick="openFile('test2.txt')">Show Test2</div>

    <div id='show_content'></div>

<script>
    var openFile = function(event) {
    var input = event;

    var reader = new FileReader();
        reader.onload = function(){
            var text = reader.result;
            document.getElementById("show_content").innerHTML = (reader.result.substring(0, 200));
        };
    reader.readAsText(input.files[0]);
    };
</script>
</body>
</html>

我想要这样当：

1）我点击div class='try1'，它会加载一个名为'test1.txt'的文件到div id='show_content'，

2) 当我点击 div class='try2' 时，它会将一个名为 'test2.txt' 的文件加载到 div id='show_content' 中。

我如何做到这一点？我知道我可以使用 jQuery .load() 函数，但事实证明 jQuery .load() 函数需要一个服务器并使用 xmlhttprequest 来加载，我需要在本地执行此操作。请如果有任何更好的解决方案来实现这一点，所有的答案都非常感谢。谢谢

【问题讨论】：

出于安全原因，您应该无法使用javascript查看用户的任何本地路径，也无法对其进行设置。您最好的选择是使用 XMLHttpRequest，无论是在本地服务器上，还是在我的机器上似乎接受它的 Firefox 浏览器上。

标签： javascript jquery html

【解决方案1】：

您可以在页面中放置一个隐藏的input，然后显式调用openFile；

<div id='try1' onclick="openFile('test.txt')">show try 1</div>
<div id="show_content"></div>
<input type="file" id="fileElem"  accept="text/plain" style="display:none" onchange="openFile(event)">

你只需要给你的div添加一个事件监听器：

var try1 = document.getElementById("try1"),
fileElem = document.getElementById("fileElem");

try1.addEventListener("click", function (e) {
    if (fileElem) {
        fileElem.click();
    }
    e.preventDefault(); // prevent navigation to "#"
}, false);

最后：

var openFile = function (event) {
    var input = event.target;

    var reader = new FileReader();
    reader.onload = function () {
        var text = reader.result;
        var content = document.getElementById("show_content");
        content.innerHTML = reader.result.substring(0, 200);
    };
    reader.readAsText(input.files[0]);
};

【讨论】：

【解决方案2】：

你可以用 jquery 来做，我是在本地做的，没有任何服务器。

第一次试试这个：

$(".try1").click(function () {
    $("#show_content").load("text1.txt", function (responseTxt, statusTxt, xhr) {
        if (statusTxt == "success")
        {
            //alert("External content loaded successfully!");
        }

        if (statusTxt == "error")
        {
            //alert("Error: " + xhr.status + ": " + xhr.statusText);
        }
    });
});

第二个：

$(".try2").click(function () {
        $("#show_content").load("text2.txt", function (responseTxt, statusTxt, xhr) {
            if (statusTxt == "success")
            {
                //alert("External content loaded successfully!");
            }

            if (statusTxt == "error")
            {
                //alert("Error: " + xhr.status + ": " + xhr.statusText);
            }
        });
    });

【讨论】：

我复制并粘贴了您的确切代码并删除了我的脚本，它警告错误：javascript alert Error: 0; NetworkError：无法在“XMLHttpRequest”上执行“发送”：无法加载“file:///C:/Users/HP/Desktop/homepage/text1.txt”。
然后我尝试将整个文件夹移动到 xampp htdocs，正如预期的那样，它工作正常。这是什么原因？我在互联网上找不到关于这件事的任何线索
你是对的 AJAX 不支持 'file://' 你应该设置一个 'http://' 服务器来托管你的文件。
如果你想创建一个“http://”服务器：这会有所帮助：stackoverflow.com/questions/5050851/…
是的，这就是我尝试使用 javascript FileReader api 的原因，我设法使用读取文件和var input = event.target，然后创建filereader()对象，但是现在如果我想用div作为参数，怎么实现呢？