Displaying Image In Fire Fox, Displaying Image In Fire Fox Using Java Script Code Options

[Enhanced Software Solutions]

Hi ,

I have written the code for displaying Image in HTML. It works fine in IE. But in Mozilla Fire Fox i am unable to display the image in Fire Fox. Please Suggest me where i am doing wrong

[CODE]

<script language="javascript">
function displayImage()
{

var a=document.getElementById("upload").value;
document.getElementById("Emp_Image").src=a;


}


</script>

<table align="center" border="0" >
<tr>
<td>
<fieldset id="fieldset3">
<table id="temp">
<tr>
<td>
<input type="file" id="upload" name="upload">
<input type="button" value="Get Image" id="image_1" onClick="displayImage()">
</td>
</tr>
<tr>
<td>
<img id="Emp_Image" src="" height="120" width="110" />
</td>
</tr>
</table>
</td>
</tr>
</table>

Thanks In Advance

[Christian J]

Most browsers except MSIE only return the file name, not the full path (for security reasons), so there will be no file path to any image, and therefore no image to display.

My K-Meleon browser returns a full path, but still doesn't display any image for some reason.

Firefox Opera 11 and Chrome add the string "C:\fakepath\" before the filename.

This post has been edited by Christian J: Mar 22 2012, 07:51 AM

[Enhanced Software Solutions]

Most browsers except MSIE only return the file name, not the full path (for security reasons), so there will be no file path to any image, and therefore no image to display.

My K-Meleon browser returns a full path, but still doesn't display any image for some reason.

Firefox and Chrome add the string "C:\fakepath\" before the filename.

Hi Christian J,

Thanks for ur reply. How to add the above string to the code. I didnt get.Can u show me an example?
Thanks in Advance

[Christian J]

My mistake, it's Chrome and Opera 11 that insert the "fakepath" string. Firefox just displays the filename without a path.

I tested with this:

CODE

<script language="javascript">
function displayImage()
{
    var a=document.getElementById("upload").value;
    document.getElementById('b').innerHTML=a;
    document.getElementById("Emp_Image").src=a;
}
</script>

<img id="Emp_Image" src="" height="120" width="110" />

<p id="b">File name/path is shown here</p>

<input type="file" id="upload" name="upload">
<input type="button" value="Get Image" id="image_1" onClick="displayImage()">

[Enhanced Software Solutions]

Hi Christian J,

Thanks for Your Reply. Is it possible store an image on sever using JavaScript so that i will display the image from server as Fire Fox doesn't allow the local system access

My mistake, it's Chrome and Opera 11 that insert the "fakepath" string. Firefox just displays the filename without a path.

I tested with this:

CODE

<script language="javascript">
function displayImage()
{
    var a=document.getElementById("upload").value;
    document.getElementById('b').innerHTML=a;
    document.getElementById("Emp_Image").src=a;
}
</script>

<img id="Emp_Image" src="" height="120" width="110" />

<p id="b">File name/path is shown here</p>

<input type="file" id="upload" name="upload">
<input type="button" value="Get Image" id="image_1" onClick="displayImage()">

[Christian J]

Maybe you can submit the file upload form with javascript or Ajax.

[Enhanced Software Solutions]

Maybe you can submit the file upload form with javascript or Ajax.

Hi Christian,

Can U provide me guidelines in this regard?

Thanks in Advance

[Christian J]

Not really, try googling "Ajax form submission".

Actually the simplest and most reliable solution is to just submit the image upload form as usual, then make the server-side script return the same form page but with the uploaded image added. That way you don't have to rely on any javascript.

If you don't want to load a completely new page when the form is submitted, you might put the form in a framed page (or use Ajax).