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


88

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

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

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

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

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

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

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


1
이미 무엇을 시도 했습니까? 당신은 무엇을 걸렸습니까?
Marcin

당신이 제 3 자 컨트롤에 관심이 있다면, 당신은 검도 UI를 고려할 수 demos.kendoui.com/web/upload/api.html을
HaBo

1
@Marcin 나는 자바 스크립트에 강하지 않았기 때문에 무엇을 시도 해야할지 모르겠습니다. 내가 복제하려는 것은 카메라로 사진을 찍은 후 추가 단계없이 사진이 즉시 서비스 또는 원격 서버에 업로드되는 기본 앱 기능입니다.
micah

답변:


103

이 작업을 수행하는 것은 정말 쉽습니다. 파일 입력의 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);

1
이 답변에 감사드립니다. 그래서이 이벤트 리스너는 input # myFileInput에서 변경 사항을 감시하고 있으며, 사진이 업로드 대기중인시기를 알고 있습니까? 그런 다음 자동으로 사진을 업로드하는 FormData objct로 sendPic 함수를 실행한다고 가정합니다. 나는 XHR이 매우 높은 수준에서 무엇인지 이해합니다. 내가 맞았나?
미가

이벤트 리스너는 사용자가 파일을 선택한 후에 호출됩니다.
Ray Nicholus 2013-06-21

그러면 이벤트 리스너 sendPic()는 카메라가 사진을 찍은 후 즉시 파일을 업로드 하라는 메시지를 표시 합니까?
micah

1
XHR을 통해 양식을 보내는 방법을 찾기 위해 올바른 방향을 알려줄 수 있습니까?
iluvpinkerton 2015

3
@iluvpinkerton 물론 입니다. Fine Uploader 또는 ajax-form을 사용 하거나 살펴보십시오 . 면책 조항-저는 두 라이브러리의 개발자입니다.
Ray Nicholus
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.