Send Image to server using File input type

Question

I have a screen where I am capturing video from camera, taking a snap. I also have a file input and I want to set this option to the captured image from the camera, i.e..snap.

I do not want to store the snap as a cookie and later retrieve it, as it will later make the users computer heavy and will require cleaning everytime.

so the code is

<input type="file" id="visitorphoto" name="visitorPhoto" accept="image/*" capture>

which is according to this w3 document.

Any Ideas using javascript?

Thanks, Abhijeet.

You just want to send the image-file captured by the input to the server? You can not wrap a form around the input and post it? You want to use ajax? — christianalfoni, Aug 08 '14 at 13:29
No ajax dear... but hey i think i can wrap it to the form and send the same... how? do i put something like '' something like this..? — Abhijeet, Aug 08 '14 at 18:45

Hitesh Modha · Accepted Answer · 2017-08-22T11:47:05.787

19

Use formData to upload file. HTML:

<input type="file" id="filechooser">

Javascript Code

function uploadFile() {
    var blobFile = $('#filechooser').files[0];
    var formData = new FormData();
    formData.append("fileToUpload", blobFile);

    $.ajax({
       url: "upload.php",
       type: "POST",
       data: formData,
       processData: false,
       contentType: false,
       success: function(response) {
           // .. do something
       },
       error: function(jqXHR, textStatus, errorMessage) {
           console.log(errorMessage); // Optional
       }
    });
}

Compatibility: http://caniuse.com/xhr2

edited Aug 22 '17 at 11:47

answered Aug 08 '14 at 13:33

Hitesh Modha

2,740
5
28
47

Can we do this using jsp please.? – Abhijeet Aug 09 '14 at 11:13
Thanks, this helped! – MaxG Mar 19 '16 at 11:26
You have a typo, it's formData, not fd in the "data" field – Nacho Aug 19 '17 at 07:21

Send Image to server using File input type

1 Answers1

Linked