CODEWITHSUNDEEP
javascripthtmlfile-upload
BuzzLightYear
BuzzLightYear

Reputation: 193

Uploading a image to html page using html and javascript

I am trying to upload an image in html page using the <input type="file"> element. I want to use the uploaded image to replace another image on the page. However, the control does not pass onto the java script function. Am trying to find out why the control does not pass. Below is the code I am using:

<label>Upload a Picture</label
<img src="unknown_person.jpg" height="250" width="250"></img>

<div>
   <form name="image1"  enctype="multipart/form-data" action="/" method="POST" onsubmit="return UploadPic()">
      <input type="file" name="imgfile"></input>
   </form>
</div>

Thanks in advance.

Upvotes: 0

Views: 231

Answers (2)

user2567070
user2567070

Reputation:

One approach would be using AJAX to query the backend on where the image was uploaded. Like so

var pullImage = function()
{
  // do ajax work
  return image ? propagateHTML('element', image.uri) : fallback();
}

var propagateHTML = function(id, uri)
{
  document.getElementById(id).innerHTML = uri;
}

Upvotes: 0

TGH
TGH

Reputation: 39248

You can't intercept a file upload in Java Script. The file has to be uploaded to the server, and then the page has to be rerendered

Upvotes: 1

Related Questions