在javascript中设置默认图像

Question

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");
    }
}

Answer 1

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";

Answer 2

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.

Answer 3

try this.

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

Answer 4

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.com/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);