ক্যামেরা অ্যাক্সেস করতে ফর্ম ইনপুট ব্যবহার এবং তত্ক্ষণাত ওয়েব অ্যাপ্লিকেশন ব্যবহার করে ফটো আপলোড করুন


88

আমি এই উত্তর জুড়ে এসেছি যা উজ্জ্বল:

আইফোন আইওএস 6 এবং অ্যান্ড্রয়েড আইসিএসের পরে, এইচটিএমএল 5 এর নীচে নিম্নলিখিত ট্যাগ রয়েছে যা আপনাকে আপনার ডিভাইস থেকে ছবি তুলতে দেয়:

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

ক্যাপচার ক্যামেরা, ক্যামকর্ডার এবং অডিওর মতো মান নিতে পারে।

ছবি তোলার পরে অবিলম্বে আপলোড করার জন্য কোনও ধরণের এজ্যাক্স ব্যবহার করে এই পদক্ষেপটি আরও নেওয়া সম্ভব?

উদাহরণস্বরূপ, আমার ফোনটি ব্যবহার করে, একবার আমি ইনপুটটিতে ট্যাপ করি, তারপরে এটি ক্যামেরাটি খোলে যা তাত্ক্ষণিকভাবে আমাকে একটি ফটো তুলতে এবং সেভ করার অনুমতি দেয়। আমি যখন এটি ক্যামেরায় সংরক্ষণ করি, তখন এটি আপলোড করার জন্য ফাইল হিসাবে ইনপুট বোতাম দ্বারা তালিকাভুক্ত হয়।

এই ফর্মটির জমা দেওয়ার বোতামটিতে ক্লিক করার জন্য ব্যবহারকারী অপেক্ষা না করে এই ফটোটি তত্ক্ষণাত্ আপলোড হতে পারে?


4
আপনি ইতিমধ্যে কি চেষ্টা করেছেন? আপনি কি স্টাম্পড করেছেন?
মার্সিন

আপনি যদি তৃতীয় পক্ষের নিয়ন্ত্রণগুলিতে আগ্রহী হন তবে আপনি কেন্ডো
উইন্ডো

4
@ মার্সিন আমি জাভাস্ক্রিপ্ট নিয়ে কখনই শক্তিশালী ছিলাম না তাই কী চেষ্টা করব তাও নিশ্চিত ছিলাম না। আমি যা অনুলিপি করার চেষ্টা করছি সেটি হ'ল নেটিভ অ্যাপ্লিকেশন বৈশিষ্ট্য যেখানে ক্যামেরা সহ ছবি তোলার পরে অতিরিক্ত পদক্ষেপ ছাড়াই ফটো তাত্ক্ষণিক পরিষেবা বা রিমোট সার্ভারে আপলোড হয়ে যায়।
মাইকা

উত্তর:


103

এটি করা সত্যিই সহজ, কেবল ফাইল ইনপুটটির অন্বেষণ হ্যান্ডলারের ভিতরে কোনও এক্সএইচআর অনুরোধের মাধ্যমে ফাইলটি প্রেরণ করুন।

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

4
এই উত্তরের জন্য আপনাকে ধন্যবাদ। সুতরাং এই ইভেন্ট শ্রোতা একটি পরিবর্তন জন্য # আমারফাইলিপুট ইনপুটটি দেখছেন, কোনও ছবি আপলোড হওয়ার জন্য সারি করা হচ্ছে তা জেনে? এবং তারপরে আমি অনুমান করি যে এটি ফর্মডাটা আপত্তিটি সহ স্বয়ংক্রিয়ভাবে ফটো আপলোড করে সেন্ডপিক ফাংশনটি সম্পাদন করবে? আমি বুঝতে পারছি এক্সএইচআর খুব উচ্চ স্তরে কী। আমি কি অধিকার পেয়েছি?
মাইকা

ইভেন্ট শ্রোতার দ্বারা ব্যবহারকারী কোনও ফাইল নির্বাচন করার পরে আহ্বান জানানো হয়।
রায় নিকোলাস

সুতরাং ইভেন্ট শ্রোতা sendPic()ক্যামেরা ছবি তোলার পরে অবিলম্বে ফাইল আপলোড করার অনুরোধ জানায় ?
মাইকা

4
এক্সএইচআর এর মাধ্যমে কীভাবে ফর্ম পাঠাতে হয় তা জানতে আপনি আমাকে সঠিক দিকে নির্দেশ করতে পারেন?
iluvpinkerton

4
@iluvpinkerton নিশ্চিত, ব্যবহার (বা কটাক্ষপাত করা) ফাইন আপলোডার বা Ajax-ফর্ম । দাবি অস্বীকার - আমি উভয় গ্রন্থাগারের বিকাশকারী।
রে নিকোলাস
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.