Uploading a image to html page using html and javascript

Question

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.

To add to the above question, am trying to upload an image and then call javascript function that replaces the image of existing <img> — BuzzLightYear
– BuzzLightYear, Commented Jul 10, 2013 at 5:15

TGH · Accepted Answer · 2013-07-10 05:16:35Z

1

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

answered Jul 10, 2013 at 5:16

TGH

39.4k13 gold badges106 silver badges140 bronze badges

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

4 Comments

BuzzLightYear Over a year ago

But can't I call some function direclty after file is uploaded? Right now it doesn't seem to call the function UploadPic(). Any suggestions on that?

Mike Christensen Over a year ago

Where are you submitting the form? It won't call UploadPic until the form is actually submitted. Selecting a file simply sets a value in a form field.

BuzzLightYear Over a year ago

@mike-christensen, could you give an example of what you mean by submitting the form? Do you mean I should provide some path in action attribute where form is posted and then comes back to js function?

Mike Christensen Over a year ago

@BuzzLightYear - I mean you need a <input type="submit" /> button somewhere. Once clicked, the form's onsubmit event will be fired and the selected file will be uploaded to the server.

user2567070 · Accepted Answer · 2013-07-10 05:22:13Z

0

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

answered Jul 10, 2013 at 5:22

user2567070

1 Comment

BuzzLightYear Over a year ago

My problem is call not going to the javascript function "UploadPic()". so, am not able to use the code inside that. So, the code you gave will have same problem.

Collectives™ on Stack Overflow

Uploading a image to html page using html and javascript

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related