ใช้การป้อนแบบฟอร์มเพื่อเข้าถึงกล้องและอัปโหลดรูปภาพทันทีโดยใช้เว็บแอป

ฉันเจอคำตอบนี้ซึ่งยอดเยี่ยม:

ใน iPhone iOS6 และจาก Android ICS เป็นต้นไป HTML5 มีแท็กต่อไปนี้ซึ่งช่วยให้คุณถ่ายภาพจากอุปกรณ์ของคุณ:

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

การจับภาพสามารถใช้ค่าต่างๆเช่นกล้องถ่ายรูปกล้องถ่ายวิดีโอและเสียง

เป็นไปได้หรือไม่ที่จะก้าวไปอีกขั้นโดยใช้ ajax บางชนิดเพื่ออัปโหลดรูปภาพทันทีหลังจากถ่ายเสร็จ

ตัวอย่างเช่นการใช้โทรศัพท์ของฉันเมื่อฉันแตะที่อินพุตมันก็จะเปิดกล้องขึ้นมาซึ่งจะทำให้ฉันสามารถถ่ายภาพและบันทึกได้ทันที เมื่อฉันบันทึกลงในกล้องแล้วปุ่มป้อนข้อมูลจะแสดงรายการเป็นไฟล์ที่จะอัปโหลด

ต้องใช้อะไรบ้างในการอัปโหลดรูปภาพนี้ทันทีแทนที่จะรอให้ผู้ใช้คลิกปุ่มส่งของแบบฟอร์ม

มันง่ายมากที่จะทำเช่นนี้เพียงแค่ส่งไฟล์ผ่านคำขอ XHR ภายในตัวจัดการ onchange ของอินพุตไฟล์

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