एक छवि डाउनलोडर बनाने में अनुभव

प्रस्तावना

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

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

पहला निर्णय। HTML4

बेशक, यह सबसे सरल और सबसे स्पष्ट है। एक फॉर्म बनाएँ, इनपुट-फ़ाइल को वहाँ रखें, और इसे php स्क्रिप्ट के साथ सर्वर पर प्रोसेस करें:

if(is_uploaded_file($_FILES["filename"]["tmp_name"])) { move_uploaded_file($_FILES["filename"]["tmp_name"], $_FILES["filename"]["name"]); } else { echo("  "); } 

अब आपको कम रिज़ॉल्यूशन की प्रतियां बनाने की आवश्यकता है। यहां आप विभिन्न इमेज प्रोसेसिंग लाइब्रेरी का उपयोग कर सकते हैं। उदाहरण के लिए, इमेजिक। ऐसा ही मैंने शुरू में किया था। स्थानीय मेजबान पर सब कुछ ठीक रहा। फिर मैंने एक सस्ती होस्टिंग चुनी, वहां प्रोजेक्ट रखा। मैंने परीक्षण करना शुरू कर दिया। और यहाँ मुख्य bummer आया। अच्छे रिज़ॉल्यूशन वाली छवियों (2500x1900) के लिए छोटी प्रतियां नहीं बनाई गईं। बहुतों ने शायद अनुमान लगाया कि क्यों। लॉग के माध्यम से अफवाह फैलाने के साथ-साथ मानसिक प्रयास करने के कारण यह मुझ पर हावी हो गया। जब आप छवियों को संसाधित करना शुरू करते हैं, और पूरे मैट्रिक्स के साथ काम करते हैं, तो बहुत अधिक रैम की आवश्यकता होती है। और मेरी बल्कि मामूली होस्टिंग टैरिफ ने इसे बहुत अधिक प्रदान नहीं किया।

और यह पहले से ही एक समस्या थी। आप निश्चित रूप से, बेहतर टैरिफ ले सकते हैं। लेकिन यह स्थिति मूलभूत रूप से नहीं बदलेगी। अतिरिक्त भार के साथ एक ही बात होगी। संक्षेप में दृष्टिकोण गलत है। आपको सर्वर पर नहीं, बल्कि क्लाइंट पर छवि को हेरफेर करने की आवश्यकता है। और क्रॉस-ब्राउज़र HTML + जावास्क्रिप्ट यहां फिट नहीं हुआ।

दूसरा उपाय। फ़्लैश

बेशक, समाधान भी क्रॉस-ब्राउज़र नहीं है। लेकिन 99% फ़्लैश उपयोगकर्ता अभी भी इसके लायक हैं, इसलिए यह एक कोशिश के लायक है। इसके अलावा, वहाँ स्पष्ट लाभ हैं:

• अतुल्यकालिक लोडिंग
• बैच अपलोड विकल्प
• छवि पूर्वावलोकन प्रदर्शित करने की क्षमता
• डिज़ाइन विकल्प सीमित नहीं हैं

हमें एक डायलॉग खोलने और स्थानीय मशीन से चित्रों की सूची प्राप्त करने के लिए FileReferenceList की आवश्यकता है। इसके बाद, प्रत्येक को डाउनलोड करें और इसके साथ आवश्यक क्रियाएं करें:

 var FileList:Array; var send_element; var load_element; var script_name = "../../ajax.php"; var type_filter:FileFilter = new FileFilter(" (*.jpg, *.jpeg, *.gif, *.png)","*.jpg;*.jpeg;*.gif;*.png"); var OpenFileDialog:FileReferenceList = new FileReferenceList(); OpenFileDialog.addEventListener(Event.SELECT, onSelectList); function onSelectList(e:Event){ Select_check(); } function Select_check(){ var element: FileReference = OpenFileDialog.fileList.shift(); load_element["original"] = element; FileList.push(load_element); element.addEventListener(Event.COMPLETE, onLocal_complete); element.load(); } function onLocal_complete(e:Event){ //     e.target.data load_element["original"].removeEventListener(Event.COMPLETE, onLocal_complete); if(OpenFileDialog.fileList.length > 0) Select_check(); } function open(){ OpenFileDialog.browse([type_filter]); } function save(){ var send_element = FileList.shift(); send_element["original"].addEventListener(ProgressEvent.PROGRESS, onPOST_progress); send_element["original"].addEventListener(Event.COMPLETE, onPOST_complete); send_element["original"].addEventListener(IOErrorEvent.IO_ERROR, onPOST_error); var cookie = ExternalInterface.call("function(){ var name = 'PHPSESSID'; var prefix = name + '='; var cookieStartIndex = document.cookie.indexOf(prefix); if (cookieStartIndex == -1) return null; var cookieEndIndex = document.cookie.indexOf(';', cookieStartIndex + prefix.length); if (cookieEndIndex == -1) cookieEndIndex = document.cookie.length; return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex));}"); var DataVartibles:URLVariables = new URLVariables(); DataVartibles.PHPSESSID = cookie; var FileRequest = new URLRequest(script_name); FileRequest.data = DataVartibles; FileRequest.method = URLRequestMethod.POST; send_element["original"].upload(FileRequest, php_file); } function onPOST_progress(e:ProgressEvent){ //  ,   e.bytesLoaded } function onPOST_error(e:IOErrorEvent){ //      if(FileList.length > 0) save(); } function onPOST_complete(e:Event){ if(FileList.length > 0) save(); } 

ब्राउज़ विधि फ़ाइल डाउनलोड संवाद को कॉल करती है। एक सूक्ष्मता है: विधि को तभी निष्पादित किया जाएगा जब कोड को किसी तत्व के EVENT.CLICK ईवेंट के श्रोता में कहा जाता है।

यह FileReference वर्ग के विवरण पर भी रहने लायक है। एक स्थानीय छवि अपलोड करने और इसे सर्वर पर स्थानांतरित करने की आवश्यकता है। सर्वर पर स्थानांतरण के लिए अपलोड, अपलोड - लोड विधि की आवश्यकता है। यहां एक और सूक्ष्मता है: जब FileReference कुकीज़ का उपयोग करके सर्वर पर अपलोड किया जाता है तो केवल IE से प्रेषित किया जाता है ( डेमेट्रो से जानकारी के लिए धन्यवाद)। इसलिए, यदि आप चाहते हैं, उदाहरण के लिए, उसी सत्र के भीतर काम करने के लिए, आपको जावास्क्रिप्ट फ़ंक्शन को कॉल करके ब्राउज़र से कुकीज़ प्राप्त करना होगा। फ्लैश ड्राइव से ही ऐसा करना बेहतर है। इसके लिए, एक्सटर्नल इंट्रोडक्शन उपयुक्त है। अगला, हम उन URL को रिकॉर्ड करते हैं जिनकी हमें URLVariables में आवश्यकता है।

तो, बुनियादी कार्यक्षमता है। लेकिन सवाल छवियों के थंबनेल बनाने और भेजने के साथ रहता है। और यहाँ FileReference अब हमारी मदद नहीं करेगा, क्योंकि यह केवल डाउनलोड की गई स्थानीय फ़ाइलों को भेजने में सक्षम है।

मैं छोटी प्रतियां बनाने के मुद्दे पर विचार नहीं करूंगा; कई पुस्तकालय हैं जो ऐसा कर सकते हैं। हालाँकि, सर्वर पर भेजने के लिए, इस डेटा को बाइटएरे के रूप में दर्शाया जाना चाहिए।
अब विचार करें कि सर्वर को इस डेटा के भेजने को कैसे व्यवस्थित किया जाए। सामान्य चर URLVariables का उपयोग करना और फिर URLRequest में इसे जोड़ने से काम नहीं चलेगा। इसलिए, आपको अनुरोध हेडर स्वयं बनाना होगा। URLRequest आपको ऐसा करने की अनुमति देता है। परिणामस्वरूप, हम एक वर्ग बनाते हैं जो सर्वर को डेटा भेजता है:

 package { import flash.net.URLRequest; import flash.net.URLLoader; import flash.net.URLRequestMethod; import flash.net.URLLoaderDataFormat; import flash.utils.ByteArray; import flash.utils.Endian; import flash.net.URLRequestHeader; public class HTTPLoader extends URLLoader { var HTTPRequest; var BOUND:String = ""; var ENTER:String = "\r\n"; var ADDB:String = "--"; var index_file = 0; var PostData:ByteArray; public function HTTPLoader(script_name: String){ BOUND = getBoundary(); PostData = new ByteArray(); PostData.endian = Endian.BIG_ENDIAN; HTTPRequest = new URLRequest(script_name); HTTPRequest.requestHeaders.push(new URLRequestHeader('Content-type','multipart/form-data; boundary=' + BOUND)); HTTPRequest.method = URLRequestMethod.POST; } public function addVariable(param_name:String, param_value:String){ PostData.writeUTFBytes(ADDB + BOUND); PostData.writeUTFBytes(ENTER); PostData.writeUTFBytes('Content-Disposition: form-data; name="'+param_name+'"'); PostData.writeUTFBytes(ENTER); PostData.writeUTFBytes(ENTER); PostData.writeUTFBytes(param_value); PostData.writeUTFBytes(ENTER); } public function addFile(filename:String, filedata:ByteArray){ PostData.writeUTFBytes(ADDB + BOUND); PostData.writeUTFBytes(ENTER); PostData.writeUTFBytes('Content-Disposition: form-data; name="Filedata' + index_file + '"; filename="' + filename + '"'); PostData.writeUTFBytes(ENTER); PostData.writeUTFBytes('Content-Type: application/octet-stream'); PostData.writeUTFBytes(ENTER); PostData.writeUTFBytes(ENTER); PostData.writeBytes(filedata,0,filedata.length); PostData.writeUTFBytes(ENTER); PostData.writeUTFBytes(ENTER); index_file++; } public function send(){ PostData.writeUTFBytes(ADDB+BOUND+ADDB); HTTPRequest.data = PostData; this.load(HTTPRequest); } public function getBoundary():String { var _boundary:String = ""; for (var i:int = 0; i < 0x20; i++) { _boundary += String.fromCharCode( int( 97 + Math.random() * 25 ) ); } return _boundary; } } } 

मैं क्लास को पूरी तरह से लाता हूं, क्योंकि HTTP रिक्वेस्ट के लिए सही हेडर जनरेट करने में मुझे काफी समय लगा। आशा है कि यह किसी की मदद करता है। एक वर्ग का उपयोग करना बहुत सरल है। यहाँ एक उदाहरण है:

 var POSTLoader:HTTPLoader = new HTTPLoader("../../ajax.php"); POSTLoader.addEventListener(Event.COMPLETE, POSTLoader_complete); POSTLoader.addVariable("AJAX_module_name", "pic_loader.php"); POSTLoader.addFile("pic_100", send_element["pic_100"]); POSTLoader.send(); 

खैर, Event.COMPLETE श्रोता में, वह करें जो आपको चाहिए। इस पद्धति का नुकसान यह है कि आप डाउनलोड प्रक्रिया को ट्रैक नहीं कर सकते हैं, इसलिए केवल दो राज्य उपलब्ध हैं - फ़ाइल डाउनलोड हो गई है या नहीं।
Php में, आप आसानी से $ _FILES सरणी के माध्यम से चल सकते हैं और "Filedata" + इंडेक्स नाम की प्रत्येक फ़ाइल उठा सकते हैं, और फिर इसे सहेज सकते हैं।

 if(isset($_FILES["Filedata0"])){ for($i = 0; $i < $n; $i++){ $file_name = $_FILES["Filedata".$i]["name"]; move_uploaded_file($_FILES["Filedata".$i]['tmp_name'],$file_path.$file_name); } } 

यहाँ एक समाधान है। यदि आप चाहें, तो आप चित्रों का पूर्वावलोकन तुरंत प्रदर्शित कर सकते हैं, या उन्हें बेस 64 के रूप में जावास्क्रिप्ट में स्थानांतरित कर सकते हैं। खैर, यह कोई है जिसे आप पसंद करते हैं।

तीसरा उपाय। एचटीएमएल 5

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

 <input id="im" type="file" style="position:absolute; top:-999px; visibility:hidden"/> <div id="button" style="background-color: blue; width: 100px; height:40px;"></div> 

 <script type='text/javascript'> var btn = document.querySelector("#button"); btn.onclick = function(){ var im = document.querySelector("#im"); im.click(); } </script> 

यह समाधान लगभग सभी आधुनिक ब्राउज़रों में काम करता है। सिवाय एक के। क्या लगता है ...
अनुमान मत करो, ओपेरा। 11.52 समावेशी से पहले के संस्करणों में, यह नहीं किया जा सकता है। इसलिए, इनपुट-फ़ाइल पर ओवरलेइंग मेकअप अभी भी एक समस्या है।

निष्कर्ष

बेशक, एक वास्तविक परियोजना में, इन विधियों के संयोजन का उपयोग करना बेहतर है ताकि बूटलोडर सभी के लिए काम करे। उदाहरण के लिए, यदि उपयोगकर्ता के ब्राउज़र में एचटीएमएल 5 फ़ंक्शन समर्थित नहीं हैं, तो आप फ्लैश का उपयोग करने का प्रयास कर सकते हैं। यदि फ्लैश भी अनुपस्थित है, तो हम एक सरल html-solution देते हैं। यह अजीब है, लेकिन यह काम करता है
मुझे उम्मीद है कि मेरा लेख किसी की मदद करता है।