Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Send Image to server using File input type

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.

like image 819
Abhijeet Avatar asked Aug 08 '14 13:08

Abhijeet


People also ask

How do I import an image into an input type file?

But it is possible to restrict the file types to only images, or certain image file extensions. To achieve this, you need to use the HTML accept attribute. This attribute is only used with <input type="file"> and serves as a filter to select file inputs from the file input dialog box.

How do you specify a file type in HTML input?

<input type="file"> <input> elements with type="file" let the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using form submission, or manipulated using JavaScript code and the File API.


1 Answers

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

like image 166
Hitesh Modha Avatar answered Oct 11 '22 00:10

Hitesh Modha