सबसे छोटी छवि अपलोडर!

यह आलेख दिखाता है कि छवि होस्टिंग एपीआई का उपयोग करके केवल क्लाइंट पर कोड के साथ एक बहुत ही सरल अपलोडर कैसे बनाया जाए। यदि आप अधिक उन्नत अपलोडर में रुचि रखते हैं, जैसे आकार, फसल, ड्रा, आदि। - एचटीएमएल 5 इमेज अपलोडर कैसे विकसित करें लेख पढ़ें। फ़ॉर्मडैट () और क्रॉस-डोमेन एक्सएचआर का उपयोग करके लेख की सामग्री उल्लेखनीय है।

मैं आपके ध्यान में क्रोम और फ़ायरफ़ॉक्स 4 में काम करने वाले एक चित्र ऐप लोडर को प्रस्तुत करता हूं, जिसमें जावास्क्रिप्ट की कई लाइनें शामिल हैं! यह ड्रैग एन ड्रॉप सपोर्ट और क्रॉस-डोमेन XMLHttpRequest का उपयोग करके imgur.com एपीआई पर आधारित है। अर्थात्, आप सर्वर पर कोड का उपयोग किए बिना अपने HTML पृष्ठ से साइट पर छवियों को अपलोड करने के लिए Imgur.com निर्माता एपीआई का उपयोग कर सकते हैं।

इसके साथ क्या किया जा सकता है इसका एक उदाहरण यहां दिया गया है ( पूर्ण कोड ):

function upload(file) { //    <input>   Drag'n Drop //    ? if (!file || !file.type.match(/image.*/)) return; //  ! //   FormData var fd = new FormData(); fd.append("image", file); // Append the file fd.append("key", "6528448c258cff474ca9701c5bab6927"); //   : http://api.imgur.com/ //  XHR (Cross-Domain XH,  !!!) var xhr = new XMLHttpRequest(); xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom! xhr.onload = function() { // ! // URL : JSON.parse(xhr.responseText).upload.links.imgur_page; } //    ,    . //    formdata xhr.send(fd); } 

वह सब है!