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


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.