I have a requirement where i need to set a default image if the image is not uploaded by user. I am trying to set the image using javascript. My image is located in images folder of my project in eclipse.

my html code is:

<tr>
    <td align="right">Upload Image :</td>
    <td>
         <input type="file"  id="imageNonSaml" name="imageNonSaml" value=""/>
    </td>
</tr>

my javascript is :

function testSSO(){
    var image=document.getElementById("imageNonSaml").value;
    if(image==null || image==''){
        alert("inside if");
        document.getElementById('imageNonSaml').setAttribute('name',"/assets/img/generic.png");
    }
}

I have a requirement where i need to set a default image if the image is not uploaded by user. I am trying to set the image using javascript. My image is located in images folder of my project in eclipse.

my html code is:

<tr>
    <td align="right">Upload Image :</td>
    <td>
         <input type="file"  id="imageNonSaml" name="imageNonSaml" value=""/>
    </td>
</tr>

my javascript is :

function testSSO(){
    var image=document.getElementById("imageNonSaml").value;
    if(image==null || image==''){
        alert("inside if");
        document.getElementById('imageNonSaml').setAttribute('name',"/assets/img/generic.png");
    }
}

• javascript
• html

• @til_b No console errors. i am facing problem in setting the image path. – Saha Commented Jul 2, 2013 at 14:06
• are you trying to set input's value? – vladkras Commented Jul 2, 2013 at 14:06
• 2 You try to set the value of the file upload field. What you probably want is a <img src="..."> tag that displays the image. I suggest you read a basic book on HTML and how it works; sorry for the rudeness but you seem to lack some basic understanding of HTML. We were all beginners once, but this site will not teach you programming. – til_b Commented Jul 2, 2013 at 14:07
• @vladkras No, the image was already there in images folder of my project. I am trying to set that image. – Saha Commented Jul 2, 2013 at 14:09
• Hi. I think I understand what you are trying to do here. You want to set a default image if none is provided. You don't need to use javascript for that. Do this server side, where you process the form. – reggaemahn Commented Jul 2, 2013 at 14:12

4 Answers 4

You're trying to change the name attribute of the file input. It's not possible to set the path of the a file input. The reason for this is security - if it was possible, a malicuous site could set the value and automatically submit the form in order to steal files from the user's system.

If you're intending to set the src of an <img /> then you need to reference it in your getElementById() call, and set the src property, not the name attribute.

document.getElementById('myimg').src = "/assets/img/generic.png";

You can't modify the FILE typed input with JavaScript. This would be a major security issue, if sites could automatically upload files from your machine.

try this.

function testSSO(){
 var image = document.getElementById("imageNonSaml");
 if(image.value == null || image.value == ''){
  alert("inside if");
  image.value = "/assets/img/generic.png";
 }
}

It is possible to set a default image, but not with the File element using JavaScript. Basically you have 3 options:

1.) Set it as a default value in your database. Thus if no change is made, a default image is loaded when requested from the database.

2.) Set the image in your server side language. Thus if no image is in the database, a default image is shown. <img src="<% echo image %>" />

3.) Set the Img element src attribute in JavaScript to the default image if no image can be loaded.

With jQuery this would look similar to below:

$("#imageid").attr("src","mydomain./img/imgname.png");

Or without jQuery see jay harris answer.

As to the best option, it depends on your requirements. Number 3 could be problematic if someone had JavaScript disabled (not likely nowadays) but still could happen. I would consider 1 or 2 based upon the exact requirements of my project.

EDIT:

To set your path in JavaScript I would use the full domain like so:

//get the url based upon what is in the browser
var url = location.protocol + "//" + location.host;
//build the image url from this
var imgurl = url + "/assets/img/generic.png";
//plug it into the jQuery selector
$("#imageid").attr("src",imgurl);