I have a problem. I have a page with a default avatar image and a input box below it. Its a form. The thing i want to do is that, i want the default avatar image replaced after a user selects a image from the input tag.
my code is some like this.

<img src="image\default.jpg">
<input type="file" name="select">
Is there a method using javascipt or any other language.

Recommended Answers

All 4 Replies

use onBlur inside the image tag to redirect to a js function that changes the img src

Could u please write the script for me. This is my complete code.

  <img src="defavatar.jpg" style="width:200px;">
  <input type="file" name="select">

I need the image to change after i select another image in the input tag.

Hi blessanm,

Are you trying to upload a file, or are you just grabbing data from the user input? Using file type won't return any value even when you reference it along with some script. If you're just getting data input from the user, then it is better to use "text" instead of an input "file" type.

Let me know about your answer.


I believe this isn't what you need, but still may come in handy:)


<script type="text/javascript">
/* URL of folder with images  */
var baseURL_OF_images = "./";

/* array of default image files */
var images =
      [ "image 1.jpeg", "image 2.jpeg",
        "image 3.jpeg", "image 4.jpeg",
        "image 5.jpeg", "image 6.jpeg",
        "image 7.jpeg" ]

function switchImage(imgNum){
  var x = parseInt(imgNum);
  var src = baseURL_OF_images
                + ( ( x < 0 ) ? "DefaultAvatar.JPEG": images[x] );

  document.getElementById("#AvatarImage").src = src;

  return true;

<img id="#AvatarImage" name="#AvatarImage" src="DefaultAvatar.JPEG" style="widht:200px;height:200px;"/>

<select onChange="switchImage(this.options[this.selectedIndex].value);">
  <option value="-1" selected="1">Default image</option>
  <option value="0">image #1</option>
  <option value="1">image #2</option>
  <option value="2">image #3</option>
  <option value="3">image #4</option>
  <option value="4">image #5</option>
  <option value="5">image #6</option>
  <option value="6">image #7</option>

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.