संपर्क फॉर्मवर फोटो अपलोड करण्यासाठी स्क्रिप्ट. Ajax आणि PHP. सर्व्हरवर प्रतिमा अपलोड करत आहे. jQuery सह डायनॅमिक फाइल लोड होत आहे

कोणत्याही फाइल्स कशा अपलोड करायच्या, उदाहरणार्थ, सर्व्हरवर चित्रे AJAX वापरूनआणि jQuery? हे करणे अगदी सोपे आहे! आणि खाली आम्ही सर्वकाही तपशीलवार विश्लेषण करू.

त्या "प्राचीन" काळात, जेव्हा अद्याप कोणतीही jQuery नव्हती, किंवा कदाचित एकही होती, परंतु ब्राउझर इतके अत्याधुनिक नव्हते, AJAX वापरून साइटवर फाइल अपलोड करणे एक त्रासदायक काम होते: iframes सारख्या सर्व प्रकारच्या क्रॅचद्वारे. मी ती वेळ पकडली नाही आणि आता कोणाला काळजी आहे? परंतु आता आणखी एक मनोरंजक गोष्ट आहे - साइटवर फायली जतन करणे खूप सोपे आहे. AJAX कसे कार्य करते याचा अनुभव आणि समज नसलेला वेबमास्टर देखील काय चालले आहे ते त्वरीत शोधण्यात सक्षम असेल. आणि हा लेख त्याला मदत करेल. आपण या क्षमतांचा वर्डप्रेस फंक्शन्ससह बॅकअप घेतल्यास, सर्व्हरवर फायली सुरक्षितपणे प्रक्रिया करणे आणि अपलोड करणे हे पूर्णपणे क्षुल्लक आणि अगदी मनोरंजक कार्य बनते (उदाहरणार्थ वर्डप्रेससह, लेखाचा शेवट पहा).

तथापि, सर्वकाही कितीही सोपे असले तरीही, हे लक्षात घेतले पाहिजे की फाइल्ससह काम करण्याचा किमान अनुभव आणि मूलभूत ज्ञान Javascript मध्ये, jQuery आणि PHP अजूनही आवश्यक आहेत! कमीतकमी, आपल्याला फायली सर्व्हरवर कशा अपलोड केल्या जातात याची कल्पना करणे आवश्यक आहे, जसे की सामान्य रूपरेषा AJAX कार्य करते आणि तुम्हाला किमान थोडासा कोड वाचण्यास आणि समजण्यास सक्षम असणे आवश्यक आहे.

खाली वर्णन केलेली पद्धत बरीच स्थिर आहे आणि मूलत: त्यावर अवलंबून आहे Javascript ऑब्जेक्टनवीन FormData() , ज्याला सर्व ब्राउझरमध्ये मूलभूत समर्थन आहे.

सामग्रीच्या अधिक समजण्यायोग्य आकलनासाठी, ते चरणांमध्ये विभागले गेले आहे. एवढेच, चला उडूया...

हे सर्व साइटवर उपलब्धतेसह सुरू होते इनपुट फील्डफाइल टाइप करा. या फील्डला फॉर्म (टॅग) चा भाग असण्याची गरज नाही.

अशा प्रकारे, आमच्याकडे फाइल फील्ड आणि "अपलोड फाइल्स" बटणासह HTML कोड आहे.

फायली डाउनलोड करा

पहिली पायरी म्हणजे डाउनलोड केलेल्या फाइल्सचा डेटा मिळवणे.

जेव्हा तुम्ही फाइल फील्डवर क्लिक करता, तेव्हा फाईल्स निवडण्यासाठी एक विंडो दिसते, निवडल्यानंतर, त्यांच्याबद्दलचा डेटा इनपुट फील्डमध्ये सेव्ह केला जातो आणि आम्हाला तेथून "पिक अप" करावे लागते. हे करण्यासाठी, आम्ही बदल जेएस इव्हेंटमध्ये एक फंक्शन संलग्न करू जे जेएस व्हेरिएबल फाइल्समधील विद्यमान फाइल फील्ड डेटा जतन करेल:

वर फाइल्स; // चल. फाइल डेटा असेल // फील्ड व्हॅल्यू फाइल $("इनपुट").on("बदल", फंक्शन())( फाइल्स = this.files; )) बदलते तेव्हा डेटासह व्हेरिएबल भरा.

आमच्याकडे फाइल डेटा आहे, आता आम्हाला तो AJAX द्वारे पाठवायचा आहे. आम्ही हा कार्यक्रम “अपलोड फाइल्स” बटणावर क्लिक करण्यासाठी नियुक्त करतो.

क्लिक करण्याच्या क्षणी, आम्ही एक नवीन ऑब्जेक्ट नवीन formData() तयार करतो आणि त्यात फाइल व्हेरिएबलमधील डेटा जोडतो. फॉर्मडेटा() वापरून आम्ही खात्री करू की सबमिट केलेला डेटा आम्ही ब्राउझरमध्ये फॉर्म सबमिट केल्यासारखा दिसतो.

अशी विनंती करण्यासाठी, अतिरिक्त AJAX पॅरामीटर्स jQuery मध्ये निर्दिष्ट करणे आवश्यक आहे, त्यामुळे नेहमीचे $.post() फंक्शन योग्य नाही आणि आम्ही अधिक लवचिक ॲनालॉग वापरतो: $.ajax() .

दोन महत्वाचे अतिरिक्त पॅरामीटर्सअसत्य वर सेट करणे आवश्यक आहे:

प्रोसेसडेटा प्रसारित डेटाची प्रक्रिया अक्षम करते. डीफॉल्टनुसार, उदाहरणार्थ, साठी विनंत्या मिळवा jQuery क्वेरी स्ट्रिंगमध्ये डेटा गोळा करते आणि URL च्या शेवटी ती स्ट्रिंग जोडते. च्या साठी पोस्ट डेटाइतर परिवर्तने करतो. स्त्रोत डेटामधील कोणतेही बदल आमच्यामध्ये व्यत्यय आणतील, म्हणून आम्ही हा पर्याय अक्षम करतो... सामग्री प्रकार विनंती प्रकार शीर्षलेख सेट करणे अक्षम करते. डीफॉल्ट jQuery स्थापना"application/x-www-form-urlencoded" च्या बरोबरीचे आहे. तुम्ही हे पॅरामीटर "multipart/form-data" वर सेट केल्यास, PHP अजूनही डेटा हस्तांतरित करण्यात सक्षम होणार नाही. एक चेतावणी प्रदर्शित करेल "मल्टीपार्ट/फॉर्म -डेटामध्ये गहाळ सीमा"... सर्वसाधारणपणे, हा पर्याय अक्षम करणे हा सर्वात सोपा मार्ग आहे, नंतर सर्वकाही कार्य करते // प्रक्रिया आणि पाठवणे! AJAX विनंतीतुम्ही upload_files बटणावर क्लिक करता तेव्हा $(".upload_files").on("click", function(event)( event.stopPropagation(); // सर्व चालू JS इव्हेंट थांबवणे.preventDefault(); // डीफॉल्ट थांबवणे वर्तमान घटकासाठी इव्हेंट - साठी क्लिक करा टॅग // फायली रिकाम्या असल्यास काहीही करू नका if(typeof files == "अपरिभाषित") रिटर्न; // एक फॉर्म डेटा ऑब्जेक्ट तयार करा var डेटा = नवीन FormData(); // $.each(files, function(key, value)( data.append(key, value); )); // विनंती data.append("my_file_upload", 1) ओळखण्यासाठी व्हेरिएबल जोडा; // AJAX विनंती $.ajax(( url: "./submit.php", प्रकार: "POST", // महत्वाचे! डेटा: डेटा, कॅशे: खोटे, डेटा प्रकार: "json", // प्रसारित डेटाची प्रक्रिया अक्षम करा , प्रोसेसडेटा: असत्य, // विनंती प्रकार शीर्षलेख सेट करणे अक्षम करा म्हणून jQuery सर्व्हरला सांगेल की ही एक स्ट्रिंग विनंती आहे contentType: false, // यशस्वी सर्व्हर प्रतिसादाचे कार्य यश: function(प्रतिसाद, स्थिती , jqXHR)( // ओके - फाइल्स. लोड केले असल्यास(typeof response.error === "अपरिभाषित")( // डाउनलोड केलेल्या फाइल्सचे पथ ".ajax-reply" ब्लॉक var files_path = response.files मध्ये प्रदर्शित करा; var html = ""; $.each(files_path, function( key, val)(html += val +"
"; )) $(".ajax-reply").html(html); ) // error else ( console.log("ERROR: " + response.error); ) ), // सर्व्हर प्रतिसाद त्रुटी फंक्शन त्रुटी: फंक्शन(jqXHR, status, errorThrown)( console.log("AJAX विनंती त्रुटी: " + स्थिती, jqXHR); ) ));

आता शेवटची पायरी: पाठवलेल्या विनंतीवर प्रक्रिया करणे आवश्यक आहे.

हे स्पष्ट करण्यासाठी, आम्ही फायलींसाठी अतिरिक्त तपासणी न करता विनंतीवर प्रक्रिया करू, उदा. फक्त प्राप्त फाईल्स मध्ये जतन करा इच्छित फोल्डर. जरी, सुरक्षिततेसाठी, पाठवलेल्या फायली तपासल्या पाहिजेत, किमान फाईलचा विस्तार (प्रकार)...

खालील कोडसह submit.php फाईल तयार करू (असे गृहीत धरले जाते की submit.php फाइल ज्या फोल्डरमधून AJAX विनंती पाठवली आहे त्याच फोल्डरमध्ये आहे):

jQuery(दस्तऐवज).तयार(फंक्शन($)(// लिंक AJAX फाइल var handler ajaxurl = ""; var nonce = ""; var फाइल्स; // चल. फाइल डेटा असेल // फील्ड व्हॅल्यू फाइल $("इनपुट").on("बदल", फंक्शन())( फाइल्स = this.files; )) बदलते तेव्हा डेटासह व्हेरिएबल भरा. // upload_files बटण $(".upload_files").on("क्लिक", फंक्शन(इव्हेंट)( event.stopPropagation(); // सर्व वर्तमान JS इव्हेंट थांबवणे.preventDefault( ); // वर्तमान घटकासाठी डीफॉल्ट इव्हेंट थांबवा - साठी क्लिक करा टॅग // फायली रिकाम्या असल्यास काहीही करू नका if(typeof files == "अपरिभाषित") रिटर्न; // var डेटा = नवीन FormData(); $.each(फाईल्स, फंक्शन(की, व्हॅल्यू)( data.append(key, value); )); // रिक्वेस्ट आयडेंटिफायर व्हेरिएबल डेटा जोडा.append("कृती", "ajax_fileload"); data.append("nonce", nonce); data.append("post_id", $("body").attr("वर्ग").match(/postid-(+)/)); var $reply = $(.ajax-reply"); // AJAX विनंती $reply.text("लोड करत आहे..."); $.ajax(( url: ajaxurl, प्रकार: "POST", data: data, cache: false, dataType: "json", // प्रसारित डेटाची प्रक्रिया अक्षम करा, तो processData: false, // disable प्रमाणे प्रसारित होऊ द्या टाईप हेडर रिक्वेस्ट सेट केल्याने jQuery सर्व्हरला सांगेल की ही स्ट्रिंग रिक्वेस्ट आहे contentType: false, // function of a successful server response success: function(respond, status, jqXHR)( // OK if(respond.success) ( $.each(respond.data, function) (की, val)( $reply.append(""); )); // error else ( $reply.text("ERROR: " + response.error);) ), // सर्व्हर रिस्पॉन्स एरर फंक्शन एरर: फंक्शन(jqXHR, स्टेटस, एररथ्रॉन)( $reply.text("AJAX रिक्वेस्ट एरर: " + स्टेटस); ) )); )); ))