आइए प्रदान किए गए HTML, PHP, JavaScript, और CSS कोड को तोड़ें खंडित फ़ाइल अपलोड डैशबोर्ड के लिए भाग-दर-भाग।

HTML कोड:

संरचना अवलोकन:

• लेआउट के लिए बूटस्ट्रैप: दो मुख्य अनुभागों के साथ एक प्रतिक्रियाशील लेआउट बनाने के लिए कोड बूटस्ट्रैप 4.5.2 का उपयोग करता है:
  • खंडित अपलोड अनुभाग: बड़ी फ़ाइलों को टुकड़ों में अपलोड करने के लिए।
  • डाउनलोड अनुभाग: पहले से अपलोड की गई फ़ाइलों को सूचीबद्ध करने और डाउनलोड करने के लिए।

प्रमुख तत्व:

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

PHP कोड (खंड-फ़ाइल-अपलोड.php):

यह फ़ाइल टुकड़ों में फ़ाइलें अपलोड करने के सर्वर-साइड तर्क को संभालती है।

मुख्य भाग:

1. चंक और मेटाडेटा प्राप्त करें:

   • $_FILES['fileChunk']: अपलोड की जा रही फ़ाइल का हिस्सा प्राप्त करता है।
   • $_POST['chunkIndex']: वर्तमान खंड का सूचकांक।
   • $_POST['totalChunks']: फ़ाइल के लिए टुकड़ों की कुल संख्या।

2. खंड भंडारण:

   • $chunkFilePath = $targetDir। "$fileName.part$chunkIndex": अंतिम फ़ाइल असेंबल होने तक प्रत्येक खंड को एक अलग .भाग फ़ाइल के रूप में सहेजा जाता है।

3. खंडों का विलय:

   • if ($chunkIndex == $totalChunks - 1): जब आखिरी हिस्सा अपलोड किया जाता है, तो स्क्रिप्ट सभी हिस्सों को अंतिम फ़ाइल में मर्ज कर देती है।

4. वापसी प्रतिक्रिया:

   • अपलोड स्थिति और फ़ाइल विवरण के साथ क्लाइंट को एक JSON प्रतिक्रिया लौटा दी जाती है।

चंकिंग का उपयोग क्यों करें?

• टाइमआउट और मेमोरी समस्याओं को रोकने के लिए बड़ी फ़ाइलों को छोटे टुकड़ों में तोड़ दिया जाता है, जिससे अपलोड प्रक्रिया अधिक विश्वसनीय हो जाती है।

PHP कोड (डाउनलोड.php):

फ़ाइल डाउनलोड संभालता है।

मुख्य भाग:

1. $_GET['फ़ाइल']: यूआरएल क्वेरी स्ट्रिंग से फ़ाइल नाम पुनर्प्राप्त करता है।
2. फ़ाइल पथ निर्माण:
   • $filePath = $targetDir। $fileName: फ़ाइल का पूरा पथ बनाता है।
3. फ़ाइल डाउनलोड:
   • readfile($filePath): फ़ाइल को डाउनलोड करने योग्य स्ट्रीम के रूप में क्लाइंट को भेजता है।

इसका उपयोग क्यों करें?

• उपयोगकर्ताओं को सीधे सर्वर से फ़ाइलें डाउनलोड करने में सक्षम बनाता है। सर्वर ब्राउज़र को फ़ाइल प्रदर्शित करने के बजाय उसे डाउनलोड करने के लिए प्रेरित करने के लिए उचित हेडर भेजता है।

PHP कोड (get_files.php):

डाउनलोड के लिए उपलब्ध सभी अपलोड की गई फ़ाइलों को सूचीबद्ध करता है।

मुख्य भाग:

1. scandir($targetDir): सभी अपलोड की गई फ़ाइलों के लिए निर्देशिका को स्कैन करता है।
2. array_diff(): फ़िल्टर करें। और ..फ़ाइलों की सूची से।
3. echo json_encode(array_values($files)): फ़ाइल सूची को JSON सरणी के रूप में लौटाता है।

इसका उपयोग क्यों करें?

• डाउनलोड के लिए उपलब्ध फ़ाइलों की एक गतिशील सूची प्रदान करता है, जिसे प्रत्येक अनुरोध पर अद्यतन किया जाता है।

जावास्क्रिप्ट कोड (खंड-फ़ाइल-अपलोड.जेएस):

खंडित फ़ाइल अपलोड और फ़ाइल डाउनलोड के क्लाइंट-साइड तर्क को संभालता है।

मुख्य भाग:

1. खींचें और छोड़ें:

   • preventDefaults(e): ब्राउज़र को फ़ाइलें गिराए जाने पर खोलने से रोकता है।
   • handleDrop(e): गिराई गई फ़ाइलों को संभालता है और उन्हें प्रदर्शित करता है।

2. प्रदर्शन फ़ाइल सूची:

   • displayFileList(files): अपलोड से पहले फ़ाइल सूची में चयनित फ़ाइलों को उनके आकार और स्थिति के साथ दिखाता है।

3. फ़ाइलों को टुकड़ों में अपलोड करना:

   • के लिए (फ़ाइलों की फ़ाइल दें): प्रत्येक चयनित फ़ाइल के माध्यम से लूप करें।
   • const खंड = फ़ाइल.स्लाइस(प्रारंभ, अंत): खंड के रूप में अपलोड करने के लिए फ़ाइल के एक हिस्से को स्लाइस करता है।
   • uploadChunk(): प्रत्येक खंड को पुनरावर्ती रूप से अपलोड करता है, प्रगति पट्टी और स्थिति को अद्यतन करता है, और सर्वर पर खंडों को मर्ज करता है।

4. फ़ाइलें डाउनलोड करें:

   • $.ajax({url: './src/get_files.php'}): अपलोड की गई फ़ाइलों की सूची प्राप्त करने के लिए AJAX अनुरोध भेजता है।
   • downloadFile(fileName): उपयोगकर्ता को डाउनलोड.php पर रीडायरेक्ट करके डाउनलोड आरंभ करता है।

JS में खंडित अपलोड का उपयोग क्यों करें?

• बड़ी फ़ाइलों के लिए, छोटे टुकड़ों में अपलोड करने से यह सुनिश्चित होता है कि एक हिस्सा विफल होने पर भी प्रक्रिया जारी रहती है। यह खंड-दर-खंड पुनर्प्रयास की अनुमति देकर विश्वसनीयता में सुधार करता है।

सीएसएस कोड (खंड-फ़ाइल-अपलोड.सीएसएस):

प्रमुख शैलियाँ:

1. #ड्रॉप-क्षेत्र:

   • डैश्ड बॉर्डर: दृश्य रूप से उस क्षेत्र को इंगित करता है जहां उपयोगकर्ता फ़ाइलें छोड़ सकते हैं।
   • हाइलाइट प्रभाव: जब किसी फ़ाइल को खींचा जाता है तो बॉर्डर का रंग बदल जाता है।

2. प्रोगेस बार:

   • #progress-bar: अपलोड प्रगति को दर्शाने के लिए चौड़ाई गतिशील रूप से अपडेट होती है।

3. फ़ाइल सूची:

   • #file-list .file-status: फ़ाइल नाम, आकार और स्थिति प्रदर्शित करने के लिए रिक्ति और शैलियाँ जोड़ता है।

इन तत्वों को स्टाइल क्यों करें?

• एक उपयोगकर्ता-अनुकूल इंटरफ़ेस उपयोगकर्ताओं को यह समझने में मदद करता है कि वे क्या कार्य कर सकते हैं (खींचें और छोड़ें, फ़ाइल चयन) और उनके अपलोड/डाउनलोड की स्थिति पर प्रतिक्रिया देता है।

निष्कर्ष:

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

कनेक्टिंग लिंक

यदि आपको यह श्रृंखला उपयोगी लगी, तो कृपया रिपॉजिटरी को GitHub पर एक स्टार देने या पोस्ट को अपने पसंदीदा सोशल नेटवर्क पर साझा करने पर विचार करें। आपका समर्थन मेरे लिए बहुत मायने रखेगा!

यदि आप इस तरह की और अधिक उपयोगी सामग्री चाहते हैं, तो बेझिझक मुझे फ़ॉलो करें:

• लिंक्डइन
• गिटहब

सोर्स कोड