动态新闻文章页面

Question

I am currently updating a site for the company SMI. Their website has a news page http://www.smitmc.com/news that I wish to include in their new site.

I have attempted to do this through PHP by loading text files in a folder and display them in a div.

This is my 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));
    }
?>

And this is my 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>

The problem arises when I try to read a multi-line text file. If the text file is a single line of text I have no issues. Of course this is unacceptable.

I am wondering how I can parse a multi-line text file and load it up and display it using this code. I am not interested in a CMS so please do not suggest this as an option.

Thanks

Answer 1

I think the best solution for you if you don't mind to use HTML5 is to use FileReader.

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

You will have here all the needed instruction on how to use it. I use this currently for my file uploads.