Parse text in TextArea and display images based on the path

Question

I am having a HTML5 webpage. In which I am having a TextArea with some raw data. say something like this.

Image1:
C:\Images\image1.jpg
Image2:
C:\Images\image2.jpg
Image3:
C:\Images\image3.jpg

I need to parse that textarea and show images in the path below the textarea. I need to pass that path to the img src="path" tag and i should display the images based on the paths in textarea. Any help would be appreciated!!

Answer 1

I put together a JSFiddle (http://jsfiddle.net/jt5yg/6) to do this. The HTML and Javascript were fairly simple:

<textarea id="rawdata" rows="10" style="width: 100%" onchange="processimages();">
</textarea>
<div id="images"></div>

and

var allfiles = /[a-z]\:\\[\w\\_-]+?\.jpg/gi;
function processimages(){
    var textarea = document.getElementById('rawdata');
    var imagecontainer = document.getElementById('images');
    var file;
    imagecontainer.innerHTML = '';
    while(file = allfiles.exec(textarea.value)){
        imagecontainer.innerHTML += '<img src="file:///'+file+'" />';
    }
}

Unfortunately, when I ran the script, the image tags were added, but the browser refused to display them. Security restrictions prevent the browser from accessing the local file system without explicit user action.

This makes sense, of course. If we could do this, hackers could access the contents of hidden system files on your PC the same way.