Javascript image upload and display

Question

My basic task is select image and display it,without saving it in database.

For this

1.I have made a select tag in html,through which I can upload the image.

2.I have made a blank image tag in which at there is no image source,alternate is upload image.

3.select tag has onchange javascript event handler which calls javascript function changeimage.

<script>
       function changeimage()
       {
            document.form_name.imagetag.src=document.form_name.filetag.value;
       }
</script>

In above Code

form_name : Is the name of my form

<form name = "form_name">

imagetag : Is the name of my Img tag

<Img src=" " name = "imagetag">

filetag : Is the name of my

<input type="file" name = "filetag" onchange="changeimage()">

I have save file using php extension.And when I try to print the value of filetag it shows "C:\fakepath\image.png",display this address for all image. I have save my php file in www location.

I am using window 7,wamp server and chrome latest version.

Take a look here: stackoverflow.com/a/12369027/3020926 (10s of google btw) — paskl
– paskl, Commented Jul 29, 2015 at 20:09
if I am not wrong they have use jQuery but I want through javascript. — Flicks Gorger
– Flicks Gorger, Commented Jul 29, 2015 at 20:13
There are more answers on the page I posted. One is even pure JS. — paskl
– paskl, Commented Jul 29, 2015 at 20:16
possible duplicate of HTML - Display image after selecting filename — paskl
– paskl, Commented Jul 29, 2015 at 20:16

Community · Accepted Answer · 2017-05-23 10:24:21Z

16

You may want to checkout this solution (where my code derives from). It involves a little bit of jQuery but if you truly must write it out in pure JS, here you go.

Note: I modified your tags to conform to the JS below. Also try to stay away from writing any inline scripts. Always good to keep your HTML and JS loosely coupled.

var fileTag = document.getElementById("filetag"),
    preview = document.getElementById("preview");
    
fileTag.addEventListener("change", function() {
  changeImage(this);
});

function changeImage(input) {
  var reader;

  if (input.files && input.files[0]) {
    reader = new FileReader();

    reader.onload = function(e) {
      preview.setAttribute('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

<input type="file" id="filetag">
<img src="" id="preview">

edited May 23, 2017 at 10:24

CommunityBot

11 silver badge

answered Jul 29, 2015 at 20:20

Carl Edwards

14.6k12 gold badges69 silver badges131 bronze badges

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

Comments

Ishaan · Accepted Answer · 2020-01-01 07:04:42Z

2

You can also use the Image() constructor. It creates a new HTML Image Element.

Example -

document.getElementById("filetag").addEventListener("change", function(e) {

  let newImg = new Image(width, height);

  // Equivalent to above -> let newImg = document.createElement("img");

  newImg.src = e.target.files[0];
  newImg.src = URL.createObjectURL(e.target.files[0]);

  output.appendChild(newImg);
});

Reference - https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image

answered Jan 1, 2020 at 7:04

Ishaan

1,34218 silver badges28 bronze badges

Comments

Shivam Pandey · Accepted Answer · 2022-02-10 08:04:06Z

0

You need one input tag to upload file and a image tag to render on the site.

The HTML and Javascript should look like

const renderFile = () => {
  const render = document.querySelector('img')
  const file = document.querySelector('input[type=file]').files[0]
  const reader = new FileReader();
  
  
  reader.addEventListener('load' , ()=> {
    render.src = reader.result;
  }, false)

  if(file){
    reader.readAsDataURL(file);
  }
}

<input type = 'file' onchange = 'renderFile()' >
<br>
<br>
<img src = "" alt='rendered image' id='rendered-image'  >

Simply on every upload the web page will show the image uploaded You can Style the height and width of the image according to the need

answered Feb 10, 2022 at 8:04

Shivam Pandey

11 bronze badge

Collectives™ on Stack Overflow

Javascript image upload and display

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related