从文件夹中读取txt文件的数据,并使用javascript使用浏览按钮填充文本框

时间:2015-11-21 10:33:42

标签: javascript

我是javascript的初学者。我想从我保存在文件夹中的.txt文件中读取数据,然后用这些数据填充文本框。我不想使用浏览按钮打开文件。
有人可以帮帮我..

3 个答案:

答案 0 :(得分:1)

  

我不想使用浏览按钮打开文件。

必须拥有

  • 浏览按钮或

  • 拖和降

,例如,用户必须做一些事情才能明确地为您提供要阅读的文件。如果没有用户操作让您访问该文件,则无法从用户的计算机上自动读取文件,原因可能是显而易见的。

完成浏览按钮或拖放后,您可以使用File API阅读文件并填写文本框:live copy

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Show File Data</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
</style>
</head>
<body>
<input type='file' id='fileinput'>
<textarea id="the-textarea"></textarea>
<script type='text/javascript'>
(function() {
    var input = document.getElementById("fileinput");
    input.addEventListener("change", loadFile, false);

    function loadFile() {
        var file, fr;

        if (typeof window.FileReader !== 'function') {
            alert("The file API isn't supported on this browser yet.");
            return;
        }

        if (!input.files) {
            alert("This browser doesn't seem to support the `files` property of file inputs.");
        } else if (!input.files[0]) {
            alert("Please select a file before clicking 'Load'");
        } else {
            file = input.files[0];
            fr = new FileReader();
            fr.onload = receivedText;
            fr.readAsText(file);
        }

        function receivedText() {
            document.getElementById("the-textarea").value = fr.result;
        }
    }
})();
</script>
</body>
</html>

答案 1 :(得分:0)

您可以使用XMLHttpRequest

function readFile(file)
{
    var req = new XMLHttpRequest();
    req.open("GET", file, false);
    req.onreadystatechange = function ()
    {
        if(req.readyState === 4)
        {
            if(req.status === 200 || req.status == 0)
            {
                var resp = req.responseText;
                alert(resp);
            }
        }
    }
    req.send(null);
}

从你的js调用你的函数,这里作为参数传递你本地文件的文件路径。假设你想硬编码文件路径。

readFile(file:///C:Users/Test/Desktop/Sample.txt)

答案 2 :(得分:0)

您可以使用此功能,它基本上是对您的文件的Ajax请求。

 function getTextFromFile(fileName,callBack)
    {
        var file = new XMLHttpRequest();
        file.open("GET", fileName, false);
        file.onreadystatechange = function ()
        {
            if(file.readyState === 4)
            {
                if(file.status === 200 || file.status == 0)
                {
                    var text = file.responseText;
                    callBack(text);
                }
            }
        }
        file.send(null);
    }

这样调用函数:

 getTextFromFile("example.txt",function(text){

  document.getElementById("textboxid").value = text;

  });