💰 🐛 👨🏾‍🔧 HTML5 + jQuery + PHP का उपयोग करके सर्वर पर चित्र अपलोड करना 🍌 ❤️ 😴

आपका दिन शुभ हो!

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

हमें क्या चाहिए?

HTML5 + jQuery + PHP का बस थोड़ा सा ज्ञान।

अच्छा, चलो चलते हैं।

शुरू करने के लिए, हम अपने मिनी-एप्लिकेशन का काम लिखेंगे।

1) उपयोगकर्ता अपने पीसी (हमारे मामले में, छवि फ़ाइलों) पर एक या एक से अधिक फ़ाइलों का चयन करता है और इन फ़ाइलों को एक ब्राउज़र विंडो में ड्रैग करता है जो ड्रैग एंड ड्रॉप एपीआई का समर्थन करता है (अधिक सटीक रूप से, उपयोगकर्ता फ़ाइलों को डाउनलोड करने के लिए निर्दिष्ट स्थान पर स्थानांतरित करता है)।
2) इसके बाद, एक घटना शुरू हो जाती है और एपीआई का उपयोग करके हम डाउनलोड की गई फ़ाइलों के बारे में जानकारी प्राप्त करते हैं और उन्हें अस्थायी मेमोरी में सहेजते हैं।
3) अगला, भेजने के लिए नई विधि का उपयोग करते हुए। XMLHttpRequest ऑब्जेक्ट की मूल, हम अपनी फ़ाइल अस्थायी मेमोरी से सर्वर पर भेजते हैं।

शायद उपरोक्त पूरी तरह से स्पष्ट नहीं है, लेकिन अब हर कोई सब कुछ समझ जाएगा।

चलो पहिया को सुदृढ़ नहीं करते हैं, jQuery FileDrop प्लगइन ले लो। लेकिन जब से हमने साइकिल का आविष्कार नहीं किया था, तब एक खामी है: यह प्लगइन केवल फ़ायरफ़ॉक्स और क्रोम ब्राउज़र में काम करता है। यह आश्चर्य की बात नहीं है, क्योंकि हम एचटीएमएल 5 का उपयोग करके एक एप्लिकेशन लिख रहे हैं, और सभी प्रमुख ब्राउज़र अभी तक इसका समर्थन नहीं करते हैं। लेकिन हम इस पर ध्यान नहीं देंगे, हम आगे बढ़ते हैं।

Index.html फ़ाइल बनाएँ
इस सामग्री के साथ:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>    Drag & Drop API.</title> <link rel="stylesheet" href="css/styles.css" /> </head> <body> <!--          --> <div id="dropbox"> <!--             --> <span class="message">    </span> </div> <!--   jQuery --> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <!--   FileDrop --> <script src="js/jquery.filedrop.js"></script> <!--      js     --> <script src="js/script.js"></script> </body> </html>

हम और आगे बढ़ते हैं ।।

अब हम अपना हैंडलर बनाएंगे जिसमें हम FileDrop प्लगइन और jQuery लाइब्रेरी की कार्रवाई को जोड़ते हैं , साथ ही छोटे प्रतिबंध भी बनाते हैं।

 $(function(){ var dropbox = $('#dropbox'), message = $('.message', dropbox); dropbox.filedrop({ paramname:'pic', maxfiles: 5, maxfilesize: 2, url: 'post_file.php', uploadFinished:function(i,file,response){ $.data(file).addClass('done'); }, error: function(err, file) { switch(err) { case 'BrowserNotSupported': showMessage('    HTML5!'); break; case 'TooManyFiles': alert('   1    5 '); break; case 'FileTooLarge': alert(file.name+'  .     2.'); break; default: break; } }, beforeEach: function(file){ if(!file.type.match(/^image\//)){ alert('   !!!!'); return false; } }, uploadStarted:function(i, file, len){ createImage(file); }, progressUpdated: function(i, file, progress) { $.data(file).find('.progress').width(progress); } }); var template = '<div class="preview">'+ '<span class="imageHolder">'+ '<img />'+ '<span class="uploaded"></span>'+ '</span>'+ '<div class="progressHolder">'+ '<div class="progress"></div>'+ '</div>'+ '</div>'; function createImage(file){ var preview = $(template), image = $('img', preview); var reader = new FileReader(); image.width = 100; image.height = 100; reader.onload = function(e){ image.attr('src',e.target.result); }; reader.readAsDataURL(file); message.hide(); preview.appendTo(dropbox); $.data(file,preview); } function showMessage(msg){ message.html(msg); } });

ठीक है, अब, हम अपना आवेदन करते हैं और इसे style.css फ़ाइल बनाकर निष्पादित करते हैं (स्रोत कोड के साथ संग्रह में स्थित)

इस पर, हम क्लाइंट भाग के साथ समाप्त होते हैं, और सर्वर भाग पर आगे बढ़ते हैं।
आइए एक छोटा php हैंडलर लिखें:

 <?php //    function exit_status($str){ echo json_encode(array('status'=>$str)); exit; } function get_extension($file_name){ $ext = explode('.', $file_name); $ext = array_pop($ext); return strtolower($ext); } $upload_dir = 'uploads/'; //     $allowed_ext = array('jpg','jpeg','png','gif'); //   if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){ exit_status('     !'); } if(array_key_exists('pic',$_FILES) && $_FILES['pic']['error'] == 0 ){ $pic = $_FILES['pic']; if(!in_array(get_extension($pic['name']),$allowed_ext)){ exit_status('   : '.implode(',',$allowed_ext)); } //           ,       if(move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name'])){ exit_status('   !'); } } exit_status('    '); ?>

यह सब वास्तव में है! अब हम अपना स्थानीय सर्वर लॉन्च करते हैं, साइट खोलते हैं और उसका परीक्षण करते हैं। यह कुछ इस तरह दिखना चाहिए:
1) बस ब्राउज़र पेज खोलें

2) पहली फ़ाइल डाउनलोड करें

3) 2 डी फ़ाइल डाउनलोड करें

4) 6 फाइलें डाउनलोड करें

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

यहां के सूत्र
डेमो संस्करण यहाँ
आपका ध्यान के लिए धन्यवाद!

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

HTML5 + jQuery + PHP का उपयोग करके सर्वर पर चित्र अपलोड करना

हमें क्या चाहिए?

अच्छा, चलो चलते हैं।

हम और आगे बढ़ते हैं ।।

More articles: