更新

Question

我正在尝试使用以下代码绘制图表。它运作良好。如您所见，我应该在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>

Answer 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);
}

Answer 2

如果（http）服务器上的sample.txt可用，该网站是托管的（可能是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。

Answer 3

最简单的方法是向服务器发出get请求。为此你必须使用jQuery $。get 函数。哪个会请你。

以下是对 jQuery.get()

的引用

<强> USAGE

// 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);
 });
});

如何将本地文本信息加载到<div>部分

更新

index.js

sample.txt的

没有内部文字

3 个答案: