在讀取文本文件中分離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中

回答

相關問題