【问题标题】：How to load local text information into <div> section如何将本地文本信息加载到 <div> 部分
【发布时间】：2016-08-08 07:46:23
【问题描述】：

我正在尝试使用以下代码绘制图表。它运作良好。如您所见，我应该在div 中放入一些文本信息。如果有一个 sample.txt 包含此信息在本地驱动器中，我可以将其动态加载到 div 部分而不是手动放入吗？

 <!DOCTYPE html>
 <html >
   <head>
     <meta charset="UTF-8">
     <title>Sample Diagram</title>
   </head>
   <body>
     <div class="diagram">
     Title: Diagram
  <!--   Participant FIRST
     Participant SECOND
     Participant D  
    Participant F
    Participant G     //--> 
    E->F: 2
     SECOND->FIRST: 1
     FIRST->SECOND: 1
     C-->SECOND: Request token
    C->E: 2
     SECOND->FIRST: Forward request
     FIRST->>C: Send token
     </div>
     <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
     <script src='http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js'></script>
     <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js'></script>
     <script src='http://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.4/sequence-diagram-min.js'></script>
     <script src="js/index.js"></script>
   </body>
 </html>

更新

/test/index.html
/test/js/index.js
/test/js/sample.txt
/test/sample.txt

index.js

// js-sequence-diagrams by bramp <http://bramp.github.io/js-sequence-diagrams/>
$(".diagram").sequenceDiagram({theme: 'simple'});
$(function(){
 $.get("sample.txt", function(data) {
     $(".diagram").text(data);
 });
});

sample.txt

Title: Diagram
SECOND->FIRST: 1
FIRST->SECOND: 1
C-->SECOND: Request token
C->E: 1
SECOND->FIRST: Forward request
FIRST->>C: Send token

没有内部文字

 <!DOCTYPE html>
 <html >
   <head>
     <meta charset="UTF-8">
     <title>Sample Diagram</title>
   </head>
   <body>
     <div class="diagram">

     </div>
     <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
     <script src='http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js'></script>
     <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js'></script>
     <script src='http://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.4/sequence-diagram-min.js'></script>

     <script src="js/index.js"></script>

   </body>
 </html>

【问题讨论】：

$('.diagram').text() ?顺便说一句，local file 是什么意思？选择上传的文件还是什么？
How do I load the contents of a text file into a javascript variable?的可能重复
@Magesh Kumaar。我的本地电脑中有一个 sample.txt。谢谢。
@Sigularity 我已经澄清了我的答案。 ;)
这里有一个类似的问题：Reading client side text file using Javascript

标签： javascript jquery

【解决方案1】：

向 HTML 页面添加文件输入元素：

<input type="file" id="file" onchange="readTxT()"/>

然后手动选择sample.txt：

function readTxT(){
  var reader = new FileReader();
  var files=document.getElementById('file').files;
  var f = files[0];
  reader.onload = function(e) {
    var text = reader.result;
    $(".diagram").text(text).sequenceDiagram({theme: 'simple'});
  }
  reader.readAsText(f);
}

【讨论】：

据我所知，这是在客户端加载文件的唯一可能方式。 +1

【解决方案2】：

最简单的方法是向服务器发出get 请求。为此，您必须使用 jQuery $.get 函数。它将为您提出请求。

这里引用jQuery.get()

用法

// make sure the PATH is correct for `sample.txt`    
// $.get(your URL to the file, callback function)

$(function(){
 $.get("sample.txt", function(data) {
     $(".diagram").text(data);
 });
});

【讨论】：

sample.txt 应该在 http 服务器中？我只是在没有那台服务器的情况下在我的本地电脑上测试这些东西。谢谢。
我更新了问题。显然，有一个sample.txt，但它不起作用。
路径现在没问题，但你是否将代码包装在ready function 中，我更新了我的答案试试看。
在浏览器中检查代码时，我在 index.html（第一行）和 sample.txt（第一行）上看到“语法错误”。我不确定出了什么问题。谢谢。
@Sigularity：我也看到这些错误，但仅在直接打开此文件时（而不是通过服务器）。我认为您可以放心地忽略这一点。

【解决方案3】：

如果sample.txt 在托管网站的 (http) 服务器上可用（可能是 localhost），是的。

假设你的目录结构是这样的（/var/www/ 在我的例子中是服务器的根目录）：

/var/www/
- index.html（没有图表内容的文件）
- sample.txt
- js/
  - index.js

把它放在你的index.js:

window.onload = function() {
  $.get("sample.txt", function(data) {
     $(".diagram").text(data).sequenceDiagram({theme: 'simple'});
  });  
}

如果您不使用任何 HTTP 服务器，则无法直接从文件系统加载文件 - 这是 Javascript 沙箱（安全概念）的一部分。

然后我建议使用类似lx1412's answer 的东西，手动文件选择器是唯一可行的方法。

我已经使用 Firefox 和 HTTP 服务器测试了上面的脚本；和my edit of lx1412's answer 使用没有 HTTP 服务器的 Firefox。

【讨论】：

我的本地电脑中有一个sample.txt，我正在测试这个没有任何http服务器。通过手动输入文本，它可以工作，但我在浏览器中看不到任何你的解决方案。 -.-。谢谢。
好的，谢谢。我犯了一个错误，我会更正并澄清我的答案。
我看到了浏览按钮，所以手动选择文件，但它没有显示图表。我可能会在 GUI 应用程序中生成整个 html 内容。感谢您的帮助。
@Sigularity 错误日志（检查员）说什么？
抱歉回复晚了。它只是在第一行（HTML）上说“语法错误”而没有其他内容。谢谢。