如何在HTML5加載時從服務器打開特定的csv文件

我是一個關於任何一種開發的完全noob，經過大量的在線搜索，我意識到即使我找到了我的問題的答案，我可能不會承認它。所以我有0個編碼技能，在工作中我必須從三星演示數字標牌解決方案，基本上這些顯示器可以從局域網輸出信息，而且它還具有與HTML5兼容的網頁瀏覽器。如何在HTML5加載時從服務器打開特定的csv文件

對於此演示，我必須展示如何在生產環境中使用這樣的顯示並接收從服務器顯示的信息。我設法安裝了Apache，我可以讓顯示訪問我的網頁，但因爲這只是一個顯示器，我沒有任何輸入選項。

考慮到它只是一個演示，因此合同開發HTML5應用程序是不合理的，所以我打算只顯示一個CSV文件，最好是一行一行地顯示，像這樣的信息是由一臺機器發送的。

我已經找到使我的頁面打開一個CSV文件的源代碼，但這對我來說並不好，因爲我沒有輸入法。另外，我知道我無法在客戶端自動打開CSV文件，也沒關係，我的CSV將存儲在與index.html相同的文件夾中。

所以這裏是我找到的代碼，如何在頁面被訪問時自動打開data.csv並且最好在延遲幾秒鐘的時間顯示一行信息？由於

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> <head> 
    <title></title> 
    <style type="text/css"> 
     body 
     { 
      font-family: Arial; 
      font-size: 10pt; 
      background-color: #F7F7F7; 
     } 
     table 
     { 
      border: 1px solid #ccc; 
     } 
     table th 
     { 
      background-color: #F7F7F7; 
      color: #333; 
      font-weight: bold; 
     } 
     table th, table td 
     { 
      padding: 5px; 
      border-color: #ccc; 
     } 
    </style> 
</head> 
<body> 
<script type="text/javascript"> 
function Upload() { 
    var fileUpload = document.getElementById("fileUpload"); 
    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/; 
    if (regex.test(fileUpload.value.toLowerCase())) { 
     if (typeof (FileReader) != "undefined") { 
      var reader = new FileReader(); 
      reader.onload = function (e) { 
       var table = document.createElement("table"); 
       var rows = e.target.result.split("\n"); 
       for (var i = 0; i < rows.length; i++) { 
        var row = table.insertRow(-1); 
        var cells = rows[i].split(","); 
        for (var j = 0; j < cells.length; j++) { 
         var cell = row.insertCell(-1); 
         cell.innerHTML = cells[j]; 
        } 
       } 
       var dvCSV = document.getElementById("dvCSV"); 
       dvCSV.innerHTML = ""; 
       dvCSV.appendChild(table); 
      } 
      reader.readAsText(fileUpload.files[0]); 
     } else { 
      alert("This browser does not support HTML5."); 
     } 
    } else { 
     alert("Please upload a valid CSV file."); 
    } 
} 
window.onload = Upload('contacts.csv'); 
</script> 
</head> 
<body> 
    <input type="file" id="fileUpload" /> 
    <input type="button" id="upload" value="Upload" onclick = "Upload('contacts.csv')" /> 
    <hr /> 
    <div id="dvCSV"> </div> 
</body> 
</html>

來源

2015-05-27 ionut

你不能這樣做，爲用戶安全考慮，JavaScript不能觸發或模擬文件打開，用戶需要點擊的元素觸發文件打開。嘗試使用[XmlHttpRequest（ajax）]（https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest）讀取csv文件 –

感謝對你的迴應，你送我在正確的方向，並從那裏我能找到解決我的問題的腳本。所以，如果我的問題在將來出現搜索是解決了這個問題對我下面的代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<style type="text/css"> 
#container { margin-left: auto; margin-right: auto; width: 1020px;} 
</style> 
<title>Informatii linie productie 1</title> 
</head> 
<body> 
<h1 align="center" style="margin-top:150px; margin-bottom:30px;">Informatii linie productie 1</h1> 
<div id="container"> 
<script> 
function autoRefresh() 
{ 
    window.location = window.location.href; 
} 
setInterval('autoRefresh()', 5000); 
</script> 
</div> 
</body> 
<script> 
$.get('data.csv', function(data) { 
    var html = '<table class="table table-bordered">'; 
    var rows = data.split("\n"); 
    rows.forEach(function getvalues(ourrow) { 
     html += "<tr>"; 
     var columns = ourrow.split(","); 
     html += "<td>" + columns[0] + "</td>"; 
     html += "<td>" + columns[1] + "</td>"; 
     html += "<td>" + columns[2] + "</td>"; 
     html += "<td>" + columns[3] + "</td>"; 
     html += "<td>" + columns[4] + "</td>"; 
     html += "<td>" + columns[5] + "</td>"; 
     html += "<td>" + columns[6] + "</td>"; 
     html += "</tr>"; 
    }) 
    html += "</table>"; 
    $('#container').append(html); 
}); 
</script> 
</html>

來源

2015-05-29 06:49:42 ionut

如何在HTML5加載時從服務器打開特定的csv文件

回答

相關問題