使用文件输入类型将图像发送到服务器 [英] Send Image to server using File input type

问题描述

我有一个屏幕，我从相机捕捉视频，拍摄一下。我也有一个文件输入，我想把这个选项设置为从相机捕获的图像，ie.snap。

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.

我不想将快照存储为cookie然后检索它，因为它稍后会使用户计算机很重，并且每次都需要清理。

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.

所以代码是

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

这是根据 w3文档。

使用javascript的任何想法？

Any Ideas using javascript?

谢谢，
Abhijeet。

Thanks, Abhijeet.

推荐答案

使用formData上传文件。
HTML：

Use formData to upload file. HTML:

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

Javascript Code

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

兼容性：
http://caniuse.com/xhr2

这篇关于使用文件输入类型将图像发送到服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！