将.txt文件加载到文本区域Javascript中？

Question

将.txt文件加载到文本区域Javascript中？

10

我试图将文本文件放入文本区域。结果是"http://mywebsite.com/textfile/(txtinput).txt"，但文本文件无法加载到文本区域中。

<html>
   <head>
      <title>textbox</title>
      <script type="text/javascript">
         function readBOX() {
            var txtinput = document.getElementById('txtinput').value;
            document.forms[0].text.value = ("http://mywebsite.com/textfile/") + txtinput +(".txt");
         }
      </script>
   </head>
   <body>
      <p> Type</p>
      <input type="text" id="txtinput" />
      <input id="open" type="button" value="READ" onClick="readBOX()" />
      <form>
         <textarea name="text" rows="20" cols="70">loaded text here</textarea>
      </form>
   </body>
</html>

- Gwa Si

3

请参阅AJAX - http://en.wikipedia.org/wiki/Ajax_(programming) - Phil

2

你需要使用 XMLHttpRequest 来获取它。 - Joe Simmons

5个回答

4

感谢大家。JavaScript 对我来说不起作用。我改用 PHP，现在一切运行良好。

<!DOCTYPE HTML>
<html>
   <head>
      <title>textbox</title>
   </head>
   <body>
<form action="process.php" method="post">
      <input type="text" name="name" />
      <input type="submit" />
</form>
   </body>
</html>

Process.php

<textarea name="text" rows="20" cols="70"> 
<?php $name =  $_POST["name"]; echo file_get_contents("$name");?>
</textarea>

- Gwa Si

3

这是我如何将文本加载到文本区域的方法。

Main.css

.textbox{
         font-size: 12px;
         float  : left;
         height : 197px;
         width : 650px; }


Default.html

<!DOCTYPE html>
<html> 
    <head>
        <!-- Charactor set allowed to use -->
        <meta charset="utf-8"/>

        <title>Text from .txt file to TextArea</title>

        <!-- External stylesheet -->
        <link rel="stylesheet" href="main.css" />

        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

    </head>
    <body>
       <textarea class="textbox" id="Brief" readonly></textarea>

       <script> $( "#Brief" ).load( "text.txt" ); </script>
    </body> 
</html>

在Google中搜索“文本区域格式”

- Sha1962 Development

1

最简单的方法之一是请求服务器返回预填充的文本区域（以下是使用PHP的示例）：

<textarea name="text" rows="20" cols="70">
<?php
echo file_get_contents('yourFile.txt');
?>
</textarea>

注意：任何服务器端脚本语言都可以执行类似操作。

与此同时，如果您需要动态加载它，最好使用AJAX方法。选择最适合您编写和维护的方法。虽然jQuery是一种流行的方法，但您可以自由选择任何您感到舒适的方法，并可能首先想了解XmlHttpRequest。

使用纯JavaScript进行动态AJAX请求可能会很棘手，因此请确保您的解决方案跨浏览器。常见错误是直接使用XmlHtpRequest并未使其兼容旧版IE版本，这会导致随机错误，具体取决于您使用的浏览器/版本。例如，它可能看起来像这样（需要在所有目标浏览器上进行测试，以便在需要时添加备用方案）：

纯JS：

if (typeof XMLHttpRequest === "undefined") {
    XMLHttpRequest = function () {
        try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
        catch (e) {}
        try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
        catch (e) {}
        try { return new ActiveXObject("Microsoft.XMLHTTP"); }
        catch (e) {}
        throw new Error("This browser does not support XMLHttpRequest.");
    };
}

function readBOX() {
    function reqListener () {
        document.forms[0].text.value = this.responseText;
    }

    var txtinput = document.getElementById("txtinput").value;
    var filePath = "http://mywebsite.com/textfile/" + txtinput + ".txt";

    var oReq = new XMLHttpRequest();
    oReq.onload = reqListener;
    oReq.open("get", filePath, true);
    oReq.send();
}

如果您不介意牺牲一些性能以确保最大支持，您应该使用jQuery的实现：

jQuery：

function readBOX() {
    var txtinput = document.getElementById("txtinput").value;
    var filePath = "http://mywebsite.com/textfile/" + txtinput + ".txt";

    $.ajax({
        url: filePath
    }).done(function(data){
        document.forms[0].text.value = data;
    });
}

注意：jQuery的库有点庞大，但请记住，如果您直接从谷歌服务器包含它，您的用户更有可能已经在缓存中拥有它。

希望这可以帮助您 :)

- Frederik.L

我们还需要经历“ActiveXObject地狱”吗？现代浏览器不都支持“XMLHttpRequest”了吗？ - Pavlo

对于XP及之前的旧版IE浏览器，恐怕是这样。但在现代浏览器上，这不是任何问题。 - Frederik.L

0

window.addEventListener('DOMContentLoaded', (e) => {
    let input = document.getElementById('input');
    
    // load default.txt into input box
    try {
        let fileToLoad = './default.txt';
        let xmlhttp = new XMLHttpRequest();
        xmlhttp.open('GET', fileToLoad, false);
        xmlhttp.send();
        input.innerHTML = xmlhttp.responseText;
    } catch(DOMException) {
        input.innerHTML = "Error loading file. Maybe related to filepath or CORS?";
    }
});

- RedDragonWebDesign

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Martin · Accepted Answer

您需要使用类似于此答案中所发布的内容。

jQuery

$(document).ready(function() {
   $("#open").click(function() {
       $.ajax({
           url : "helloworld.txt",
           dataType: "text",
           success : function (data) {
               $("#text").text(data);
           }
       });
   });
});

请阅读 jQuery文档中的 .ajax() 获取更多信息。

非jQuery

如果您不想使用jQuery，则必须使用 XMLHttpRequest 对象，类似于以下内容：

var xmlhttp, text;
xmlhttp = new XMLHttpRequest();
xmlhttp.open('GET', 'http://www.example.com/file.txt', false);
xmlhttp.send();
text = xmlhttp.responseText;

但是这可以在SO答案上这里阅读，或者在维基百科上阅读完整且易懂的文档。

注：但这不是跨浏览器兼容的，对于旧版本的IE，您必须使用ActiveXObject("Microsoft.XMLHTTP")对象。