Member Avatar for blessanm

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.

  • 4 Contributors
  • 4 Replies
  • 3K Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by ivannz

Recommended Answers

All 4 Replies

Member Avatar for aosmith

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

Member Avatar for blessanm

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

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

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

Member Avatar for essential

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.

essential

Member Avatar for ivannz

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

<html>
<head>

<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;
}
</script>
</head>
<body>

<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>
</select>

</body>
<html>
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.