Set default image in 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");
    }
}

@til_b No console errors. i am facing problem in setting the image path. — Saha
– Saha, Commented Jul 2, 2013 at 14:06
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
– 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
– 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
– reggaemahn, Commented Jul 2, 2013 at 14:12

MrCode · Accepted Answer · 2013-07-02 14:07:44Z

2

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

answered Jul 2, 2013 at 14:07

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MrCode Over a year ago

Did you create an <img id="myimg" />?

Saha Over a year ago

i kept <img id="myimg" /> but the value i am getting is undefined

MrCode Over a year ago

When do you run the code? Make sure you run it after the element is in the DOM and ready (e.g. window.onload), if you run it straight away the image might not be there when you try to access it

Louis Ricci · Accepted Answer · 2013-07-02 14:08:56Z

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.

answered Jul 2, 2013 at 14:08

Louis Ricci

21.1k5 gold badges50 silver badges64 bronze badges

Comments

Jay Harris · Accepted Answer · 2013-07-02 14:09:36Z

1

try this.

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

answered Jul 2, 2013 at 14:09

Jay Harris

4,27120 silver badges22 bronze badges

1 Comment

Jay Harris Over a year ago

you should do this with your server script or set a default in MYSQL

Todd Moses · Accepted Answer · 2013-07-08 20:15:05Z

0

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

edited Jul 8, 2013 at 20:15

answered Jul 2, 2013 at 14:18

Todd Moses

11k11 gold badges50 silver badges65 bronze badges

2 Comments

Saha Over a year ago

thanks for your suggestions. I want to set image using javascript. help me in setting the path of my image.

Todd Moses Over a year ago

@sahu I just added the way for you to get the image path in JavaScript.

Collectives™ on Stack Overflow

Set default image in javascript

4 Answers 4

3 Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related