Ajax फ़ाइल अपलोड jQuery और CodeIgniter का उपयोग कर

शुभ दोपहर

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

आज मैं दिखाऊंगा कि सर्वर + ड्रग और कोडआईग्निटर में ड्रॉप करने के लिए मल्टीपार्ट अपलोडिंग फाइलों को व्यवस्थित करना कितना आसान है।

jQuery फ़ाइल अपलोडर + CodeIgniter

बॉक्स से बाहर, CodeIgniter हमें पुस्तकालय का उपयोग करने की पेशकश करता है $ यह-> लोड-> पुस्तकालय ('अपलोड'); , जो आपको स्थानांतरित फ़ाइलों को नियंत्रित करने की अनुमति देता है, छवि के प्रकार, आकार, चौड़ाई और ऊंचाई द्वारा डाउनलोड को सीमित करता है। इसका उपयोग करना आसान और सुविधाजनक है, लेकिन इसे इस पुस्तकालय द्वारा INPUT पर थोड़े थोड़े प्रतिबंध पर ध्यान दिया जाना चाहिए। INPUT फ़ील्ड में पैरामीटर नाम = "userfile" होना चाहिए। हम इस तथ्य से सहमत हैं और कंट्रोलर फ़ंक्शन पर जाएं जो अपलोड लाइब्रेरी को कॉल करेगा और वास्तव में, हमारी फ़ाइलों को डिस्क पर सेव करेगा।

PHP फ़ंक्शन का एक उदाहरण कार्यान्वयन:

public function upload(){ $config['upload_path'] = "/application/uploads/"; $config['allowed_types'] = "jpg|jpeg|png|gif|flv|mp4|wmv|doc|docx|xsl|xslx|ppt|pptx|zip|rar|tar"; $config['max_size'] = 2048; $config['max_width'] = 800; $config['max_height'] = 600; $config['encrypt_name'] = TRUE; $this->load->library('upload', $config); if ($this->upload->do_upload() == false) { $error = array('error' => $this->upload->display_errors()); echo json_encode($error); }else{ $data = $this->upload->data(); echo json_encode($data); } } 

चेतावनी! आपके लिए सभी अनुमत_टाइप्स के लिए काम करने के लिए, आपको लापता MIME- प्रकार को कॉन्फ़िगरेशन फ़ाइल /application/config/mimes.php में जोड़ना होगा

फ़ाइल को सर्वर में सहेजने के लिए हमारे पास एक फ़ंक्शन तैयार है। हम ग्राहक पक्ष को पास करते हैं। हमें Github jQuery फ़ाइल अपलोड से डाउनलोड करना होगा। प्लगइन महान सुविधाएँ प्रदान करता है, लेकिन हम उन सभी का उपयोग नहीं करेंगे, हम केवल कई फ़ाइलों, ड्रग और ड्रॉप और प्रगति के डाउनलोड का उपयोग करेंगे।

हम आवश्यक जेएस को डाउनलोड पृष्ठ से कनेक्ट करते हैं:

  - jquery.fileupload.js - jquery.fileupload-video.js - jquery.fileupload-process.js - jquery.iframe-transport.js - upload.js //    -   

और CSS फ़ाइल:

  - css/jquery.fileupload.css 

हमारे INPUT को पेज पर जोड़ें:

 <?php echo form_open_multipart('/admin/upload', array('id' => 'fileupload')); ?> <span class="fileinput-button"> <span> </span> <input type="file" name="userfile" multiple> </span> <?php echo form_close(); ?> 

बहुत कुछ बचा नहीं है - upload.js लिखें, जो INPUT फ़ील्ड को बदलने की घटना को सुनेगा और चयनित फ़ाइल को लोड करने का कारण बनेगा। "और वादा किया गया ड्रग और ड्रॉप कहाँ है?" आप पूछें ड्रग और ड्रॉप पहले से ही jQuery फ़ाइल अपलोड के लिए धन्यवाद चल रहा है। मानक फ़ाइल चयन संवाद को कॉल करने के बजाय, आप एक ही बार में पृष्ठ पर कई फ़ाइलों को खींच सकते हैं और उन्हें प्राथमिकता के क्रम में सर्वर पर अपलोड किया जाएगा।

और अंत में Upload.js

 $(document).ready(function(){ $('#fileupload').fileupload({ dataType: 'json', progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $('.progress .bar').css('width', progress + '%'); }, done: function (e, data) { if(data.result.error != undefined){ $('#error').html(data.result.error); //          $('#error').fadeIn('slow'); }else{ $('#error').hide(); //        $('#files').append("<img class='img-polaroid' style='margin-left:15%;padding:10px;width:auto;height:250px' src=''>"); $('#success').fadeIn('slow'); } } } }); }); 

डेटा सर्वर से हमारी प्रतिक्रिया है, लेकिन यह डाउनलोड फ़ाइल के बारे में जानकारी के साथ एक सरणी नहीं है। JSON प्रारूप में सभी जानकारी Data.Result में संग्रहीत है। वैसे, कंसोल.लॉग (डेटा) आपको बहुत सी दिलचस्प चीजें खोजने में मदद करेगा, जैसे: भेजी गई फाइलों की संख्या, त्रुटियां और बहुत कुछ।

यह सब, मैं सामग्री की उपयोगिता के लिए आशा करता हूं।