Dynamic News Article Page

Question

Я в настоящее время обновляю сайт для компании SMI. На их веб-сайте есть страница новостей http://www.smitmc.com/news, которую я хочу включить в их новый сайт.

Я попытался сделать это через PHP, загрузив текстовые файлы в папку и отобразив их в div.

Это мой PHP

<?php 
    $time = array(); 
    $text = array(); 
    $title = array(); 
    foreach (glob("news/*.txt") as $filename) 
    { 
     $fileText = file_get_contents($filename); 

     $title[] = basename($filename, ".txt");; 
     $text[] = addslashes($fileText); 
     $time[] = "Date Uploaded: ".date("F d Y",filemtime($filename)); 
    } 
?> 

И это мой Javascript

<script type="text/javascript">  
     window.onload = function() 
     { 
      var arr = new Array("<?php echo implode('","',$time)?>"); 
      var arrText = new Array("<?php echo implode('","',$text)?>"); 
      var arrTitle = new Array("<?php echo implode('","',$title)?>"); 
      for (var i = 0; i < arrText.length; i ++) 
      { 
       var div = document.createElement ("div"); 
       var titleText = document.createElement("h1"); 
       var dateStamp = document.createElement("p"); 
       var articleText = document.createElement("p"); 

       div.style.border = "1px solid #c2c2c2"; 
       div.style.background = "#f2f2f2"; 
       div.style.borderRadius = "3px"; 
       div.style.margin = "20px"; 
       div.style.padding = "10px"; 
       div.style.fontFamily = "Amble"; 
       div.style.color = "#555"; 
       div.style.fontSize = "12px"; 
       div.id = arrTitle[i]; 

       dateStamp.style.position = "relative"; 
       dateStamp.style.left = "-10px"; 
       dateStamp.style.top = "-10px"; 
       dateStamp.style.fontSize = "16px"; 
       dateStamp.style.color = "#be1111"; 

       articleText.style.position = "relative"; 
       articleText.style.left = "-10px"; 
       articleText.style.top = "-10px"; 
       articleText.style.fontSize = "14px"; 

       titleText.innerHTML = arrTitle[i] ; 
       dateStamp.innerHTML = arr[i]; 
       articleText.innerHTML = arrText[i]; 

       document.getElementById("newsBlock").appendChild (div); 
       document.getElementById(arrTitle[i]).appendChild(titleText); 
       document.getElementById(arrTitle[i]).appendChild(dateStamp); 
       document.getElementById(arrTitle[i]).appendChild(articleText); 
      } 
     } 
    </script> 

Проблема возникает, когда я пытаюсь прочитать текстовый файл из нескольких строк. Если текстовый файл является одной строкой текста, у меня нет проблем. Конечно, это неприемлемо.

Мне интересно, как я могу разобрать многострочный текстовый файл и загрузить его и отобразить его с помощью этого кода. Я не заинтересован в CMS, поэтому, пожалуйста, не предлагайте это как вариант.

Благодаря

Answer 1

Я думаю, что лучшее решение для вас, если вы не возражаете использовать HTML5 является использование FileReader.

http://www.htmlgoodies.com/beyond/javascript/read-text-files-using-the-javascript-filereader.html#fbid=wUtRDwEASPK

Вы будете иметь здесь всю необходимую инструкцию о том, как использовать его. Я использую это в настоящее время для загрузки файлов.