🙅🏼 👩🏻‍✈️ 🎅🏻 HTML5 ड्रैग एंड ड्रॉप फ़ाइल डाउनलोड 🏆 🎬 💬

HTML5 के नवाचारों के लिए धन्यवाद, ड्रैग और ड्रॉप इंटरफेस बनाना बहुत आसान हो गया है। दुर्भाग्य से, इन नवाचारों में अभी तक व्यापक ब्राउज़र समर्थन नहीं है, लेकिन मुझे उम्मीद है कि यह जल्द ही बदल जाएगा (वर्तमान में फ़ायरफ़ॉक्स 4+, क्रोम और ओपेरा 11.10 में काम करता है)।

अंकन

मुझे तुरंत यह कहना होगा कि पेशेवरों की तुलना में शुरुआती लोगों के लिए लेख अधिक लिखा गया था। इसलिए, कुछ बिंदुओं को महान विवरण में वर्णित किया जाएगा।

आरंभ करने के लिए, हमें निम्नलिखित सामग्री के साथ एक HTML फ़ाइल बनाने की आवश्यकता है:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 Drag and Drop  </title> <link rel="stylesheet" href="/style.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="/script.js"></script> </head> <body> <form action="/upload.php"> <div id="dropZone">  ,   . </div> </form> </body> </html>

हमारे साथ सारा काम ड्रापजोन कंटेनर के साथ होगा। अब हमारे दस्तावेज़ के लिए शैलियाँ जोड़ें (style.css):

 body { font: 12px Arial, sans-serif; } #dropZone { color: #555; font-size: 18px; text-align: center; width: 400px; padding: 50px 0; margin: 50px auto; background: #eee; border: 1px solid #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #dropZone.hover { background: #ddd; border-color: #aaa; } #dropZone.error { background: #faa; border-color: #f00; } #dropZone.drop { background: #afa; border-color: #0f0; }

शैलियों में, आप ड्रॉपज़ोन तत्व के तीन राज्यों को नोटिस कर सकते हैं: होवर पर, यदि कोई त्रुटि है और सफल निष्पादन पर।

स्क्रिप्ट डाउनलोड करें

अब हम सबसे दिलचस्प हिस्सा शुरू करेंगे - जावास्क्रिप्ट कोड लिखना। शुरू करने के लिए, हमें चर बनाने की जरूरत है, जिसमें से एक में हम अपने ड्रॉपज़ोन को रखेंगे, और दूसरे में हम अधिकतम फ़ाइल आकार निर्दिष्ट करेंगे।

 $(document).ready(function() { var dropZone = $('#dropZone'), maxFileSize = 1000000; //    - 1 . });

अगला, हमें यह देखने की आवश्यकता है कि क्या ब्राउज़र ड्रैग एंड ड्रॉप का समर्थन करता है, इसके लिए हम फाइलराइड फ़ंक्शन का उपयोग करेंगे। यदि ब्राउज़र ड्रैग एंड ड्रॉप का समर्थन नहीं करता है, तो ड्रॉपज़ोन तत्व के अंदर हम "ब्राउज़र द्वारा समर्थित नहीं!" लिखेंगे और "त्रुटि" वर्ग जोड़ेंगे।

 if (typeof(window.FileReader) == 'undefined') { dropZone.text('  !'); dropZone.addClass('error'); }

अगली चीज जो हम करेंगे, वह है ड्रॉपजोन पर किसी फाइल को खींचने के प्रभाव का एक एनीमेशन। हम ondragover और ondragleave घटनाओं का उपयोग करके इन कार्यों को ट्रैक करेंगे। लेकिन, चूंकि इन घटनाओं को jQuery ऑब्जेक्ट द्वारा ट्रैक नहीं किया जा सकता है, हमें न केवल "ड्रॉपज़ोन", बल्कि "ड्रॉपज़ोन [0]" को संदर्भित करने की आवश्यकता है।

 dropZone[0].ondragover = function() { dropZone.addClass('hover'); return false; }; dropZone[0].ondragleave = function() { dropZone.removeClass('hover'); return false; };

अब हमें एक "ऑनड्रॉप" ईवेंट हैंडलर लिखने की आवश्यकता है - यह वह घटना है जब घसीटे गए फ़ाइल को नीचे लाया गया था। कुछ ब्राउज़रों में, जब आप ब्राउज़र विंडो में फ़ाइलों को खींचते हैं, तो वे स्वचालित रूप से खुलते हैं, इसलिए ऐसा नहीं होगा, हमें ब्राउज़र के मानक व्यवहार को रद्द करना होगा। हमें "होवर" वर्ग को हटाने और "ड्रॉप" वर्ग जोड़ने की भी आवश्यकता है।

 dropZone[0].ondrop = function(event) { event.preventDefault(); dropZone.removeClass('hover'); dropZone.addClass('drop'); };

अगला, हमें फ़ाइल आकार पर एक चेक जोड़ने की जरूरत है। ऐसा करने के लिए, कोड की निम्नलिखित पंक्ति को ऑनर हैंडलर में जोड़ें:

 var file = event.dataTransfer.files[0]; if (file.size > maxFileSize) { dropZone.text('  !'); dropZone.addClass('error'); return false; }

अब हमें अपनी फ़ाइल को हैंडलर को भेजने के लिए एक AJAX अनुरोध लिखने की आवश्यकता है। AJAX अनुरोध बनाने के लिए, हम XMLHttpRequest ऑब्जेक्ट का उपयोग करेंगे। हम XMLHttpRequest ऑब्जेक्ट के लिए दो ईवेंट हैंडलर जोड़ते हैं: एक फ़ाइल लोड करने की प्रगति दिखाएगा, और दूसरा लोडिंग का परिणाम। हम एक हैंडलर के रूप में upload.php फ़ाइल निर्दिष्ट करेंगे।

 var xhr = new XMLHttpRequest(); xhr.upload.addEventListener('progress', uploadProgress, false); xhr.onreadystatechange = stateChange; xhr.open('POST', '/upload.php'); xhr.setRequestHeader('X-FILE-NAME', file.name); xhr.send(file);

अब हम डाउनलोड प्रगति और डाउनलोड परिणाम कार्यों से निपटेंगे। UploadProgress फ़ंक्शन में कुछ भी जटिल नहीं है, बस सबसे सरल गणित है।

 function uploadProgress(event) { var percent = parseInt(event.loaded / event.total * 100); dropZone.text(': ' + percent + '%'); }

स्टेटचेंज फ़ंक्शन में, हमें यह जांचने की आवश्यकता है कि क्या बूट प्रक्रिया पूरी हो गई है, और यदि हां, तो हमें यह जांचने की आवश्यकता है कि क्या कोई त्रुटि हुई है। सफल अनुरोध कोड "200" है, यदि कोड इससे अलग है, तो इसका मतलब है कि त्रुटि हुई है।

 function stateChange(event) { if (event.target.readyState == 4) { if (event.target.status == 200) { dropZone.text('  !'); } else { dropZone.text(' !'); dropZone.addClass('error'); } } }

जावास्क्रिप्ट भाग की वर्तनी पूरी है।

सर्वर साइड

हमारे लिए जो कुछ भी है वह सबसे सरल हैंडलर लिखना है जो फ़ाइल को हमारे लिए सही जगह पर बचाएगा। हैंडलर लिखने में, मैं गहराई से नहीं जाऊंगा, लेकिन बस PHP में एक छोटा सा उदाहरण देता हूं।

 <?php $uploaddir = getcwd().DIRECTORY_SEPARATOR.'upload'.DIRECTORY_SEPARATOR; $uploadfile = $uploaddir.basename($_FILES['file']['name']); move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile); ?>

यह सब, मुझे आशा है कि लेख आपके लिए उपयोगी था।

आप यहाँ स्रोत फ़ाइलों को डाउनलोड कर सकते हैं ।
लेख अनुवाद और संशोधन: एचटीएमएल 5 नेटिव ड्रैग एंड ड्रॉप फाइल अपलोड

HTML5 ड्रैग एंड ड्रॉप फ़ाइल डाउनलोड

अंकन

स्क्रिप्ट डाउनलोड करें

सर्वर साइड

More articles: