HTML5 का उपयोग करके फ़ाइलें अपलोड करना और हमने कितनी बार बुरे शब्द कहे

कार्य था: मल्टीबूट के लिए HTML5 की क्षमताओं का उपयोग करने वाले सर्वर पर एक फ़ाइल लोडर को खोजने या बनाने के लिए। बूटलोडर चाहिए:

• फ़ाइल के साथ किसी भी पैरामीटर POST द्वारा भेजें;
• कुकीज़ भेजें;
• एक साथ कई फ़ाइलों का चयन करने की क्षमता प्रदान करें (या कई हज़ार - यहाँ जैसा कि उपयोगकर्ता चाहता है);
• समूहों में फाइलें भेजें;
• फ़ाइलों को मेगाबाइट्स की एक निश्चित संख्या तक या समूह में फ़ाइलों की एक निश्चित संख्या तक एकत्र किया जाता है; (यह इस तथ्य के कारण है कि सर्वर में POST अनुरोध के आकार और एक पैकेज में फ़ाइलों की संख्या पर एक सीमा है)

फ्लैश के साथ अनुभव की कमी के कारण, केवल बूटलोडर बनाने के लिए जावास्क्रिप्ट का चयन किया गया था।

तो इसका क्या हुआ

सबसे पहले एक खोज थी: SWFupload, Uploadify और अन्य का अध्ययन किया गया था। शायद बहुत अच्छा नहीं है, लेकिन उनमें से प्रत्येक सभी आवश्यकताओं को पूरा नहीं करता है।



कीड़े, कीड़े, कीड़े। Flash के कुछ संस्करण किसी चर के नाम को नियंत्रित नहीं कर सकते हैं। SWFupload कुकीज़ नहीं भेजता है, लेकिन इसमें एक कुकी कलेक्टर है, और यह केवल उन्हें GET या POST विधियों का उपयोग करके भेजता है। हालांकि, हमारे पास सर्वर पर एक सीएमएस है जो कुकीज़ के आधार पर उपयोगकर्ता सत्र की जांच करता है, इसलिए फ्लैश को खारिज कर दिया गया था और एचटीएमएल 5 का उपयोग करके एक समाधान चुना गया था।

चूंकि FileApi केवल FF 3.0+, Chrome और Safari 4+ द्वारा समर्थित है, इसलिए हम इन ब्राउज़रों के साथ काम करने की जटिलताओं का विश्लेषण करेंगे।



सूक्ष्मता नंबर 1



Chrome में readAsBinaryString का उपयोग करके फ़ाइल सामग्री को पुनः प्राप्त करना।

इस पद्धति का उपयोग करते समय, हमें एक समझ से बाहर की समस्या का सामना करना पड़ा कि सभी फाइलें पीटने में आती हैं, जिसका आकार मूल आकार से लगभग 1.5 गुना है। हमने इस समस्या को हराने के लिए प्रबंधन नहीं किया, इसलिए क्रोमियम (साथ ही सफारी) के लिए हमने फॉर्मडाटा का उपयोग किया।



FF (4.0 तक) में POST विधि का उपयोग करके फ़ाइलों का एक समूह + कुछ डेटा भेजने के लिए, हम मल्टीपार्ट / फॉर्म-डेटा बनाते हैं:

Content-Type: multipart/form-data; boundary=------multipartformboundary1295790618

\r\n

--------multipartformboundary1295790618

\r\n

Content-Disposition: form-data; name='user_files[]';filename='My_File1.jpg'

\r\n

Content-Type: application/octet-stream

\r\n

\r\n



\r\n

--------multipartformboundary1295790618

\r\n

Content-Disposition: form-data; name='user_files[]';filename='My_File2.jpg'

\r\n

Content-Type: application/octet-stream

\r\n

\r\n



\r\n

--------multipartformboundary1295790618

\r\n

Content-Disposition: form-data; name='my_param'

\r\n

\r\n

Param_value

\r\n

--------multipartformboundary1295790618

\r\n

Content-Disposition: form-data; name='my_param'

\r\n

\r\n

Param_value

\r\n

--------multipartformboundary1295790618--

\r\n







सूक्ष्मता संख्या 2



FormData समर्थन की परिभाषा निम्नानुसार सत्यापित की जा सकती है:

function isFormDataSupported() {

return (window.FormData);

}









सूक्ष्मता संख्या 3



FF 3.0 / 3.5 और FF 3.6 फ़ाइलों की सामग्री को प्राप्त करने के लिए विभिन्न कार्यों का उपयोग करते हैं:

एफएफ 3.0 / 3.5: रीडअंसल ()

FF 3.6: getAsBinary ()



सूक्ष्मता संख्या ४



XMLHttpRequest के माध्यम से फाइल भेजने में भी अंतर है:

FormData के लिए, आपको Send () विधि का उपयोग करके भेजना होगा, और getAsBinary () द्वारा प्राप्त फ़ाइलों को भेजने या readAsBinaryString का उपयोग करने के लिए, आपको sendAsBinary () का उपयोग करके भेजने की आवश्यकता है।



सूक्ष्मता संख्या 5



एफएफ शायद ही कभी क्रोम या सफारी के विपरीत XMLHttpRequest की प्रगति घटना को बढ़ाता है। वास्तव में, एफएफ प्रगति घटना कभी-कभी बहुत तेज कनेक्शन के साथ या किसी स्थानीयहोस्ट पर काम नहीं करती थी।



सूक्ष्मता संख्या ६



XMLHttpRequest की FF में गर्भपात की घटना भी त्रुटि घटना को बढ़ाती है। इसके साथ आपको विशेष रूप से सावधान रहने की आवश्यकता है यदि आपके पास वहां त्रुटियों के लिए हैंडलर है - यह उपयोगकर्ता के लिए अतिरिक्त प्रश्न पैदा कर सकता है।



सूक्ष्मता संख्या 7



PHP के लिए, मैं आपको php.ini में निम्नलिखित सेटिंग्स पर ध्यान देने की सलाह देता हूं:



post_max_size - POST का अधिकतम आकार।

upload_max_filesize - अधिकतम फ़ाइल आकार।

max_file_uploads - डाउनलोड की गई फ़ाइलों की अधिकतम संख्या।



यदि आप हमारी स्क्रिप्ट का उपयोग करेंगे, तो अपनी सर्वर सेटिंग्स के लिए स्क्रिप्ट को बदलना न भूलें।



छवियों को डाउनलोड करने के लिए डेमो (विस्तार द्वारा एक फिल्टर है)

डेमो डाउनलोड करें

AJAX डाउनलोड पर अच्छी प्रस्तुति



अद्यतन:



सूक्ष्मता नंबर 8 (इस बग को ध्यान देने के लिए सॉल्टैन का धन्यवाद)



विंडोज पर, [इनपुट प्रकार = फ़ाइल एकाधिक] के माध्यम से कई फ़ाइलों का चयन करने में एक और अति सूक्ष्म अंतर है:

चयन के लिए उपलब्ध फ़ाइलों की संख्या चयनित फ़ाइलों के नामों की कुल लंबाई पर निर्भर करती है। क्रोम के लिए - 256 वर्ण, एफएफ के लिए - 4096 (एक फ़ाइल की लंबाई नहीं, बल्कि नामों की कुल लंबाई, अर्थात्, अगर ऐसी फाइलें हैं जिनके नाम में 20 वर्ण हैं, तो क्रोम में आप अधिकतम 10 फ़ाइलों का चयन कर सकते हैं)। लिनक्स में, सब कुछ ठीक है।



बग विवरण:

codereview.chromium.org/4198004