कैमरा एक्सेस करने के लिए फॉर्म इनपुट का उपयोग करना और तुरंत वेब ऐप का उपयोग करके फोटो अपलोड करना

Question

मैं इस जवाब पर आया जो शानदार है:

IPhone iOS6 में और Android ICS के बाद से, HTML5 में निम्नलिखित टैग है जो आपको अपने डिवाइस से चित्र लेने की अनुमति देता है:

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

कैप्चर कैमरा, कैमकॉर्डर और ऑडियो जैसे मूल्यों को ले सकता है।

क्या किसी के तुरंत बाद फोटो खींचने के लिए किसी तरह के अजाक्स का उपयोग करके इसे एक कदम आगे ले जाना संभव है?

उदाहरण के लिए, अपने फोन का उपयोग करते हुए, एक बार जब मैं इनपुट पर टैप करता हूं, तो यह कैमरा खोलता है जो तुरंत मुझे एक फोटो लेने और इसे बचाने की अनुमति देगा। जब मैं इसे कैमरे में सहेजता हूं, तो इसे इनपुट बटन द्वारा सूचीबद्ध किया जाता है ताकि अपलोड किया जा सके।

फ़ॉर्म के सबमिट बटन पर क्लिक करने के लिए उपयोगकर्ता को प्रतीक्षा करने के बजाय इस तस्वीर को तुरंत अपलोड करने में क्या लगेगा?

Comments

आपने पहले से क्या प्रयास किया है? आपने क्या स्टंप किया है?

— मार्सिन

यदि आप 3rd पार्टी कंट्रोल में रुचि रखते हैं, तो आप Kendo UI demos.kendoui.com/web/upload/api.html

— HaBo

@Marcin मैं जावास्क्रिप्ट के साथ कभी मजबूत नहीं रहा, इसलिए मुझे यकीन नहीं था कि मैं क्या करने की कोशिश करूं। जो मैं दोहराने की कोशिश कर रहा हूं वह है मूल एप फीचर जहां कैमरा के साथ फोटो लेने के बाद बिना अतिरिक्त कदम के तुरंत सेवा या रिमोट सर्वर पर फोटो अपलोड हो जाती है।

— मीका

Answer 1

ऐसा करना वास्तव में आसान है, बस फ़ाइल इनपुट इनपुट ऑनकेयर हैंडलर के अंदर एक एक्सएचआर अनुरोध के माध्यम से फ़ाइल भेजें।

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

Comments

इस उत्तर के लिए धन्यवाद। तो यह ईवेंट श्रोता एक बदलाव के लिए इनपुट # myFileInput देख रहा है, यह जानते हुए कि फोटो अपलोड होने पर कतार में है? और फिर मुझे लगता है कि यह SendDic फ़ंक्शन को निष्पादित करेगा फॉर्मडैट objct के साथ स्वचालित रूप से फोटो अपलोड कर रहा है? मैं समझता हूं कि XHR बहुत उच्च स्तर पर है। क्या मैने इसे सही समझा?

— मीका

उपयोगकर्ता द्वारा किसी फ़ाइल का चयन करने के बाद ईवेंट श्रोता को आमंत्रित किया जाता है।

— रे निकोलस

तो इवेंट श्रोता sendPic()कैमरा फोटो लेने के बाद तुरंत फाइल अपलोड करने का संकेत देता है ?

— मीका

क्या आप मुझे सही दिशा में इंगित कर सकते हैं कि एक्सएचआर के माध्यम से फॉर्म कैसे भेजें?

— iluvpinkerton

@iluvpinkerton ज़रूर, का उपयोग करें (या एक नज़र रखना) ललित अपलोडर या अजाक्स-प्रपत्र । डिस्क्लेमर - मैं दोनों पुस्तकालयों का डेवलपर हूं।

— रे निकोलस