Question

I choose an image from the window that open up by clicking a button. Then I display the selected image. I am creating a div, then I create an image element. I get the source of the image from the uploaded file source and then append it in the div. It works fine without any server, But the window prompts for blocked contents and I allow it. But when i run it on the server, the image doesn’t show up! Even no permission is asked! Everything works fine in chrome and firefox!

Here is some code,

if(document.all) {
        var image = document.createElement("img");
        image.src = document.getElementById('fileElem').value;
        }
thumbnail.appendChild(image);

Answer 1

This would have worked in older browsers because traditionally <input type="file" /> had a value attribute that returned the full path to the specified file in the local filesystem. However since around 2006 (think IE7+, Firefox 2+, Chrome, etc) browsers no longer provide the full file path, they only provide the file’s name without directory information. This is to protect the user’s privacy (because uploaded “My Documents” files might contain the user’s real-life name, for example).

This affects both uploaded files (the browser no-longer sends the full file path in POST requests, so server-side code only get the filename and file data) as well as local scripts (as you’re experiencing yourself).