[javascript] 양식 입력을 사용하여 카메라에 액세스하고 웹 앱을 사용하여 즉시 사진 업로드

Program / 글쓴이

나는 훌륭한 대답 을 보았습니다.

iPhone iOS6 및 Android ICS 이상에서 HTML5에는 기기에서 사진을 찍을 수있는 다음 태그가 있습니다.

    <input type="file" accept="image/*" capture="camera">

캡처는 카메라, 캠코더 및 오디오와 같은 값을 취할 수 있습니다.

사진을 찍은 후 즉시 업로드하기 위해 일종의 ajax를 사용하여 한 단계 더 나아가는 것이 가능합니까?

예를 들어, 휴대 전화를 사용하여 입력을 탭하면 카메라가 열리고 즉시 사진을 찍고 저장할 수 있습니다. 카메라에 저장하면 입력 버튼 옆에 업로드 할 파일로 나열됩니다.

사용자가 양식의 제출 버튼을 클릭 할 때까지 기다리지 않고이 사진을 즉시 업로드하려면 어떻게해야합니까?

답변

이 작업을 수행하는 것은 정말 쉽습니다. 파일 입력의 onchange 핸들러 내에서 XHR 요청을 통해 파일을 보내기 만하면됩니다.

<input id="myFileInput" type="file" accept="image/*;capture=camera">

var myInput = document.getElementById('myFileInput');

function sendPic() {
    var file = myInput.files[0];

    // Send file here either by adding it to a `FormData` object 
    // and sending that via XHR, or by simply passing the file into 
    // the `send` method of an XHR instance.
}

myInput.addEventListener('change', sendPic, false);

답변