在读取文本文件中分离javascript和html端并将其显示在html中

-6

以下是示例代码。我想分开的JavaScript部分和HTML部分。然后我想要创建按钮在html中为.txt和“显示内容”按钮指定“选择文件”。 “显示内容”按钮将调用JavaScript文件以显示文本文件的内容。到目前为止，这里是我找到的代码。在读取文本文件中分离javascript和html端并将其显示在html中

function readBlob(opt_startByte, opt_stopByte) { 
 

 
    var files = document.getElementById('files').files; 
 
    if (!files.length) { 
 
    alert('Please select a file!'); 
 
    return; 
 
    } 
 
    var file = files[0]; 
 
    var start = parseInt(opt_startByte) || 0; 
 
    var stop = parseInt(opt_stopByte) || file.size - 1; 
 
    var reader = new FileReader(); 
 

 
    // If we use onloadend, we need to check the readyState. 
 
    reader.onloadend = function(evt) { 
 
    if (evt.target.readyState == FileReader.DONE) { // DONE == 2 
 
     document.getElementById('byte_content').textContent = evt.target.result; 
 
     document.getElementById('byte_range').textContent = ['Read bytes: ', start + 1, ' - ', stop + 1, 
 
                  ' of ', file.size, ' byte file'].join(''); 
 
    } 
 
    }; 
 
    var blob = file.slice(start, stop + 1); 
 
    reader.readAsBinaryString(blob); 
 
} 
 

 
document.querySelector('.readBytesButtons').addEventListener('click', function(evt) { 
 
    if (evt.target.tagName.toLowerCase() == 'button') { 
 
    var startByte = evt.target.getAttribute('data-startbyte'); 
 
    var endByte = evt.target.getAttribute('data-endbyte'); 
 
    readBlob(startByte, endByte); 
 
    } 
 
}, false);

#byte_content { 
 
    margin: 5px 0; 
 
    max-height: 100px; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
} 
 
#byte_range { 
 
    margin-top: 5px; 
 
}

<input type="file" id="files" name="file" />Read bytes: <span class="readBytesButtons"> 
 
<button data-startbyte="0" data-endbyte="4">1-5</button> 
 
<button data-startbyte="5" data-endbyte="14">6-15</button> 
 
<button data-startbyte="6" data-endbyte="7">7-8</button> 
 
<button>entire file</button> 
 
</span> 
 
<div id="byte_range"></div> 
 
<div id="byte_content"></div>

来源

2015-04-16 Decrypt D Code

我不明白你的问题：这段代码工作正常，不是吗？ – Tolokoban

是的，它的工作原理。我是这个领域的新人。但我想分开.html部分和.js部分:)谢谢:) –

如果你只是想单独HTML和Javascript，把你所有的JavaScript的东西在一个文件，说script.js。然后，在你的HTML标题中加上这个标签：

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

来源

2015-04-17 12:10:28 Tolokoban

谢谢你先生;） –

在读取文本文件中分离javascript和html端并将其显示在html中

回答

相关问题