सर्व्हरवर अनेक प्रतिमांचे सुंदर अजाक्स अपलोडिंग. Ajax आणि PHP. सर्व्हरवर प्रतिमा अपलोड करत आहे

अलीकडेच मला jQuery वापरून डायनॅमिक फाइल लोडिंग कसे करायचे हे विचारण्यात आले. वास्तविक, मला हा प्रश्न खूप पूर्वी विचारण्यात आला होता, परंतु jQuery वर कोणताही विभाग नसताना हा लेख लिहिणे अत्यंत समस्याप्रधान होते. परंतु आता काहीही आम्हाला सर्व्हरवर फायली डायनॅमिकपणे कसे अपलोड करायचे याबद्दल बोलण्यापासून प्रतिबंधित करत नाही.

वेबसाइटवर सर्व काही अतिशय चांगले वर्णन केले आहे, तसेच प्लगइन स्वतःच अगदी सोपे आहे, तथापि, मी तरीही एका उदाहरणासह सर्वकाही स्पष्ट करेन. सुरुवातीला, येथे एक साधा HTML पृष्ठ कोड आहे:

फाइल्स अपलोड करत आहे






$(कार्य() (
$("#file_upload").uploadify((
"फॉर्मडेटा" :(
"टाइमस्टॅम्प" : "",
"टोकन" : ""
},
"uploader" : "uploadify.php"
});
});

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

jQuery आणि प्लगइन स्वतः देखील कनेक्ट केलेले आहेत. पुढे, एक फॉर्म तयार केला जातो, आणि type="file" सह इनपुटला एक आयडी दिला जातो, जो नंतर स्क्रिप्टमध्ये वापरला जाईल.

स्क्रिप्ट स्वतः डेटा फॉर्मडेटामध्ये पास करते. बहुदा वर्तमान वेळआणि एक गुप्त टोकन. "unique_salt" कोणतीही गुप्त स्ट्रिंग असू शकते. मालमत्तेत"uploader " передаётся скрипт-обработчик. Теперь сам код этого обработчика:!}

मी कोडवर टिप्पणी केली, म्हणून मला वाटते की ते समजणे कठीण होणार नाही. मी फक्त एक गोष्ट लक्षात घेईन की येथे पुरेसे चेक नाहीत. तथापि, मी एका स्वतंत्र लेखात याबद्दल लिहिले.

या प्लगइनमध्ये प्रोग्रेसबार देखील तयार केला आहे, त्यामुळे आमच्यासाठी सर्वकाही आधीच केले गेले आहे. jQuery लायब्ररी आणि त्यासाठी प्लगइन्सचा हा फायदा आहे. प्रोग्रेसबारसह सर्व्हरवर फायली डायनॅमिकपणे अपलोड करणे यासारखी अत्यंत जटिल कार्ये, ज्यासाठी संपूर्ण दिवस विकास आणि नंतर त्रुटी दूर करण्यासाठी आणखी काही दिवस लागतील, तयार प्लगइन वापरून काही मिनिटांत सोडवता येतात.

आम्ही डेटा पुनर्प्राप्त करण्यासाठी आणि AJAX विनंतीसह पास करण्यासाठी अनेक मूलभूत पद्धती पाहिल्या आहेत. आता आपण फायली कशा डाउनलोड करू शकता याबद्दल बोलण्याची वेळ आली आहे AJAX वापरून. अलीकडे पर्यंत, पृष्ठ स्वतः रीलोड केल्याशिवाय फायली डाउनलोड करण्याचे बरेच मार्ग नव्हते ( लपलेले iframe, फ्लॅश). ते आजही वापरले जातात कारण अजूनही ब्राउझरच्या जुन्या आवृत्त्यांचे वापरकर्ते आहेत ज्यांच्या प्रगतीवर परिणाम झालेला नाही. पण आम्ही मागे वळून पाहणार नाही, म्हणून आम्ही काळाशी जुळवून घेतो.

चला, माझ्या मते, सर्वात एक विचार करूया सोयीस्कर मार्गफाइल्ससह कार्य करण्यासाठी (आणि केवळ नाही) - FormData ऑब्जेक्ट. वापरकर्त्याचा अवतार लोड करण्यासाठी असा एक सोपा फॉर्म असू द्या:

एचटीएमएल ( index.html फाइल)

पूर्ण नाव:
अवतार:

चला जेएस भागाकडे जाऊया. "पूर्ण नाव" फील्डमध्ये कोणतीही अडचण येणार नाही आणि आम्ही ते फक्त हे स्पष्ट करण्यासाठी वापरतो की फाइलसह, आम्ही इतर कोणताही डेटा पाठवू शकतो.

jQuery( script.js फाइल)

$(function())( $("#my_form").on("submit", function(e)( e.preventDefault(); var $that = $(this), formData = new FormData($that.get (0)); // एक नवीन ऑब्जेक्ट उदाहरण तयार करा आणि त्यावर आमचा फॉर्म द्या (*) $.ajax(( url: $that.attr("कृती"), टाइप करा: $that.attr("पद्धत"), सामग्री प्रकार: खोटे , // महत्वाचे - डीफॉल्ट डेटा स्वरूपण प्रक्रिया काढून टाका डेटा: असत्य, // महत्वाचे - डीफॉल्ट स्ट्रिंग रूपांतरण डेटा काढून टाका: फॉर्मडेटा, डेटा प्रकार: "json", यश: function(json)( if(json)( $that .replaceWith( json);

(*)कृपया लक्षात घ्या की आम्ही फॉर्म सबमिट करत नाही jQuery ऑब्जेक्ट, आणि DOM घटक

PHP हँडलर ( फाइल handler.php)

सर्व html कोड js सह:

ही फाइल सबमिट करा: अपलोड करा $("फॉर्म").सबमिट (फंक्शन(ई) ( var formData = नवीन FormData($(this)); $.ajax(( url: "file.php", प्रकार: "POST", डेटा: formData, async: असत्य, यश: फंक्शन (msg) ( alert(msg); ), error: function(msg) ( alert("Error!"); ), cache: false, contentType: false, processData: false ) e.preventDefault();

स्त्रोत कोड फाइल डाउनलोड करा:

आजकाल, वेबसाइट्स अधिकाधिक परस्परसंवादी होत आहेत. हे केवळ लागू होत नाही विशेष सेवा, पण देखील नियमित इंटरनेटदुकाने, ब्लॉग आणि लहान वेबसाइट्स. मुख्य वैशिष्ट्य आहे असिंक्रोनस JavaScriptआणि XML चे संक्षिप्त रूप AJAX असे आहे. हे तंत्रज्ञान ब्राउझरला अनुमती देते पार्श्वभूमीवेब सर्व्हरशी संप्रेषण करा आणि डेटा अद्यतनित करताना, वेब पृष्ठ पूर्णपणे रीलोड होत नाही. दुसऱ्या शब्दांत, आम्ही ब्राउझरमध्ये पृष्ठ रीलोड न करता विनंत्या करू शकतो आणि सर्व्हरकडून प्रतिसाद प्राप्त करू शकतो.

सर्वात पासून लोकप्रिय भाषावेब ऍप्लिकेशन्स विकसित करण्यासाठी PHP आहे, तर आज आपण AJAX आणि PHP चे संयोजन वापरू. AJAX आणि PHP सह काम करण्याची मूलभूत तत्त्वे समजून घेण्यासाठी उदाहरण चांगले असेल.

खरं तर, कोणत्याही विशेष अडचणी नसल्या पाहिजेत, क्रियांचे अल्गोरिदम आहे:

• चित्र निवडा
• "पाठवा" बटणावर क्लिक करा
• JavaScript (jQuery) वापरून इंटरसेप्ट फॉर्म कॉल
• विशेष PHP स्क्रिप्ट हँडलरला सामग्री पास करा
• अंमलबजावणी परिणाम परत करा
• जेव्हा निकालावर प्रक्रिया करा JavaScript मदत(jQuery)
• वापरकर्त्यास डाउनलोड माहिती प्रदर्शित करा

jQuery आणि AJAX बद्दल थोडक्यात

मी विषयापासून थोडेसे विचलित होईल आणि jQuery काय आहे ते स्पष्ट करेन. jQuery ही एक विशेष JavaScript लायब्ररी आहे जी अनेक वेळा वेब ऍप्लिकेशन्सचा विकास सुलभ करण्यात मदत करते. सोप्या शब्दात, आम्ही शुद्ध JS मध्ये केले त्यापेक्षा कमी कोड लिहू.

Ajax तुम्हाला वेब सर्व्हरसह डेटाची देवाणघेवाण करण्याची आणि वेब पृष्ठ रीलोड न करता त्याची सामग्री अद्यतनित करण्याची परवानगी देते.

मी विचार करण्यास प्रवृत्त आहे की जर एखादे साधन आहे जे आपल्याला परिणामांशिवाय विकासास गती देण्यास अनुमती देते, तर ते का वापरू नये? परंतु शुद्ध JS जाणून घेण्यास त्रास होणार नाही (जरी JS प्रवीणतेची माझी वैयक्तिक पातळी स्टॅकओव्हरफ्लोमधील कॉपी-पेस्ट उदाहरणांच्या पातळीइतकी आहे :)).

मी एकदा सोडवलेल्या समस्यांपैकी एक पाहू, म्हणजे, पूर्वावलोकनासह साइटवर प्रतिमा लोड करणे. जर तुम्ही VKontakte वर तुमचा अवतार बदलला असेल, तर तुम्हाला समजले आहे की मी कशाबद्दल लिहित आहे.

आम्हाला 3 आवश्यक आहे साधी फाइल, हे:

• फॉर्म पृष्ठ
• php हँडलर
• js फाइल

index.html Ajax अपलोड प्रतिमा अपलोड प्रतिमा फाइल:

नियमित html पृष्ठफॉर्मसह. enctype="multipart/form-data" कडे लक्ष द्या, फायली हस्तांतरित करण्यासाठी हे पॅरामीटर डेटा एन्कोडिंगची पद्धत दर्शवते; तुम्ही फाइल्स ट्रान्सफर करत असल्यास, व्हॅल्यू नेहमी मल्टीपार्ट/फॉर्म-डेटा असावी.

handler.php // फाइल्सचे ॲरे आणि ट्रान्सफर केलेल्या डेटासह ॲरे इन्स्टॉल केले आहेत का ते तपासा जर(isset($_FILES) && isset($_FILES["image"])) ( // ट्रान्सफर केलेला ॲरे $ व्हेरिएबलमध्ये सेव्ह करा image = $_FILES["image"]; // फाईलचा आकार तपासा आणि तो ओलांडत असल्यास दिलेला आकार// स्क्रिप्टची अंमलबजावणी पूर्ण करा आणि एरर दाखवा जर ($image["size"] > 200000) ( die("error"); ) // इमेज फॉरमॅट $imageFormat = explode(".", $image["name) मिळवा "]); $imageFormat = $imageFormat; // प्रतिमेसाठी नवीन नाव व्युत्पन्न करा. तुम्ही जुन्या // सह जतन करू शकता परंतु याची शिफारस केलेली नाही $imageFullName = "./images/" . हॅश("crc32", time()). "" . $imageFormat; // इमेज टाईप व्हेरिएबलमध्ये सेव्ह करा $imageType = $image["type"]; // तपासा उपलब्ध स्वरूपइमेज, इमेज जुळत असल्यास, // इमेज फोल्डरमध्ये कॉपी करा जर ($imageType == "image/jpeg" || $imageType == "image/png") ( जर (move_uploaded_file($image["tmp_name") ],$ imageFullName)) ( प्रतिध्वनी "यश"; ) इतर (इको "त्रुटी"; ) )

हे एक अतिशय सरलीकृत हँडलर आहे. मी हॅश फंक्शन वापरून प्रतिमा नाव तयार केले. फाइलची नावे सर्व्हरवर अपलोड करताना बदलणे चांगले आहे.

ajaxupload.js $(document).ready(function () ( function readImage (input) ( if (input.files && input.files) ( var reader = new FileReader(); reader.onload = function (e) ( $( "#preview").attr("src", e.target.result); reader.readAsDataURL(input.files); फंक्शन printMessage(destination, msg) ( $(destination).removeClass(); if ( msg == "यशस्वी") ( $(destination).addClass("alert alert-success").text("फाइल यशस्वीरित्या अपलोड झाली."); ) if (msg == "error") ( $(destination).addClass ("alert) alert-danger").text("फाइल अपलोड करताना त्रुटी आली." ) ) $("#image").change(function())( readImage(this); )); -image").on( "सबमिट",(फंक्शन(ई) ( e.preventDefault(); var formData = नवीन FormData(हा); $.ajax(( type:"POST", // विनंती प्रकार url: "handler.php", // हँडलर स्क्रिप्ट डेटा: फॉर्मडेटा, // आम्ही कॅशे पास करतो तो डेटा: असत्य, // POST विनंत्यांमध्ये ते डीफॉल्टनुसार अक्षम केले जाते, परंतु चला ते प्ले करूया सुरक्षित सामग्री प्रकार: असत्य, // आम्ही फॉर्ममध्ये डेटा एन्कोडिंग प्रकार सेट करतो, आम्ही ही प्रक्रिया अक्षम कराData: असत्य, // अक्षम करा कारण आम्ही फाइल पास करत आहोत success:function(data)( printMessage("#result", data); ), त्रुटी:फंक्शन(डेटा)( console.log(डेटा); ) )); ))); ));

या स्क्रिप्टमध्ये सर्वात मनोरंजक गोष्ट घडते. readImage() फंक्शन वापरून आपण फॉर्म फील्डमधून फाईल वाचू आणि त्यासाठी ब्लॉकमध्ये पास करू पूर्वावलोकन. फाइलरीडर ऑब्जेक्ट तयार केला जातो. हे वेब ऍप्लिकेशनला वापरकर्त्याच्या संगणकावरील फाईलमधील मजकूर वाचण्याची परवानगी देते. सामग्री वाचल्यावर .onload इव्हेंट सक्रिय होईल, या इव्हेंटचा वापर करून आम्ही पूर्वावलोकन ब्लॉकमध्ये प्रतिमा प्रदर्शित करू.
आणि शेवटी, .readAsDataURL() पद्धत फाईल वाचण्याची प्रक्रिया सुरू करते, वाचन पूर्ण झाल्यावर .onload इव्हेंट कार्यान्वित होईल आणि चित्र तुमच्या स्क्रीनवर दिसेल.

प्रिंटमेसेज फंक्शन फाइल डाउनलोड करण्याच्या यशस्वी किंवा अयशस्वी प्रयत्नाबद्दल माहिती प्रदर्शित करण्यासाठी डिझाइन केलेले आहे. आम्ही त्याकडे तपशीलवार पाहत नाही; ते विशेष काही दर्शवत नाही.

फॉर्मचे व्यत्यय आणि त्याची प्रक्रिया. जेव्हा तुम्ही "सबमिट" बटणावर क्लिक कराल, तेव्हा स्क्रिप्टद्वारे इव्हेंट रोखला जाईल आणि .preventDefault() फंक्शन वापरून, फॉर्म index.html वर डेटा पाठवणार नाही. .preventDefault() चा वापर कोणत्याही इव्हेंटला उठवण्यापासून रोखण्यासाठी केला जातो.

आम्हाला FormData ऑब्जेक्टची आवश्यकता आहे POST तयार करत आहेआमच्या स्क्रिप्टला विनंती, प्रत्येक फॉर्म घटक एका ओळीत प्रविष्ट करण्यापेक्षा हे खूप सोपे आहे. आम्ही एक ऑब्जेक्ट तयार केला, त्यात डेटा भरला आणि तो आमच्या ajax वर पाठवला.

बरं, खरं तर मी AJAX विनंती. आम्ही वापरत असल्याने jQuery लायब्ररी, अशी विनंती तयार करणे आणि कार्यान्वित केल्याने तुम्हाला कोणतीही समस्या उद्भवणार नाही.

खरं तर, इथेच संपवू. प्रतिमा लोड होते, पृष्ठ रीलोड होत नाही, प्रत्येकजण आनंदी आहे. आपल्याकडे प्रश्न किंवा सूचना असल्यास, टिप्पण्या लिहा.

तुमचा दिवस चांगला जावो आणि शुभेच्छा :)

सर्व्हरवर फाइल्स किंवा चित्रे अपलोड करणे खूप आहे ठराविक कार्य. परंतु प्रगती स्थिर नाही, आणि म्हणूनच आता, अर्थातच, मला पार्श्वभूमीत फायली डाउनलोड करायच्या आहेत. एक नियम म्हणून, पूर्वी हे वापरून लागू केले जाऊ शकते फ्लॅश तंत्रज्ञानकिंवा iframe. तसेच, बरेच लोक प्लगइन वापरतात जसे की jQuery फॉर्म प्लगइन किंवा Ajax फाइल अपलोड प्लगइन किंवा एकाधिक फाइल अपलोड प्लगइन आणि इतरांचा समुद्र. FormData ऑब्जेक्टच्या आगमनाने, सर्वकाही बरेच सोपे झाले आहे. FormData() तुम्हाला XMLHttpRequest वापरून सर्व्हरला पाठवण्यासाठी डेटाचा संच तयार करण्याची परवानगी देतो.

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

तर हा आमचा html भाग आहे. येथे आम्ही या वस्तुस्थितीकडे लक्ष देऊ की आमच्याकडे प्रीलोडर (लूप केलेले मंडळ) च्या चित्रासह जीआयएफ फाइल आहे, जी आम्ही शैलींसह प्रदर्शनापासून लपवतो. आम्ही फाइल फील्डमध्ये id = फाइल आणि फॉर्ममध्ये enctype = "multipart/form-data" देखील नियुक्त करू. फाइल फील्डचे नाव फाइल असेल म्हणजे. जेणेकरुन आम्ही ॲरेसह कार्य करू शकतो, कारण आम्हाला एकाधिक फाइल्स (एकाधिक विशेषता) अपलोड करण्याची परवानगी आहे.

#preloader (दृश्यता: लपविलेले;) माहिती जोडा

या फॉर्ममध्ये, फाइल फील्ड व्यतिरिक्त, आमच्याकडे दोन फील्ड आहेत उदाहरणार्थ: input=text. त्या. आमच्या समोर नियमित फॉर्मउदाहरणार्थ, ॲडमिन पॅनेलसाठी, जो तुम्हाला आवश्यक असलेल्या फील्डचा संच आहे. सुरुवातीला, तुम्हाला हवे असल्यास, तुम्ही फाइलच्या सुरुवातीला FILES ॲरे दर्शविणाऱ्या ओळी लिहून स्क्रिप्टचे ऑपरेशन तपासू शकता:

//upload.php print_r($_FILES);

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

//upload.php फंक्शन show_dir($dir) // tmp फोल्डर ($list = scandir($dir); unset($list,$list); foreach ($list as $file) ( echo " "; ) ) foreach ($_FILES $key => $value) (//फाइल tmp वर हलवा move_uploaded_file($value["tmp_name"], "tmp/."$value["name"]); ) show_dir( "./tmp/");

आणि आता आमची js स्क्रिप्ट, जी आमच्या फाइल्स पार्श्वभूमीत सर्व्हरवर अपलोड करेल. FormData() ऑब्जेक्टमुळे सर्व जादू केली जाईल. आम्ही हा कोड आमच्या index.php च्या शेवटी टॅगच्या आधी जोडू.

$(document).ready(function())( $("#preloader").hide(); $("#file").bind("change", function())( var data = new FormData() ; var error = ""; jQuery.each($("#file").files, function(i, file) ( if(file.name.length)< 1) { error = error + " Файл имеет неправильный размер! "; } //Проверка на длину имени if(file.size >1000000) ( त्रुटी = त्रुटी + " फाइल " + file.name + " मोठी आहे."; ) // फाइल आकार तपासत आहे जर(file.type != "image/png" && file.type != "image/jpg " " && !file.type != "image/gif" && file.type != "image/jpeg") ( error = error + "File " + file.name + " png, jpg किंवा gif शी जुळत नाही" ; ) / / फाइल प्रकार तपासत आहे. )); if (error !="") ($("#info").html(error);) else ( $.ajax(( url: "upload.php", data: data, cache: false, content Type: false, processData: असत्य, प्रकार: "POST", beforeSend: function() ( $("#preloader").show(); ), यश: function(data)( $("#info").html(data); $("#प्रीलोडर").लपवा());

बरं, हे सर्व दिसते. कोणाला काही समजत नसेल तर विचारा. जर कोणाला काही जोडले असतील तर मलाही आनंद होईल!
टीप: जर तुम्ही अद्याप कोणत्याही डिरेक्टरीमधून फाइल्स हटवण्यासाठी कोड वापरला नसेल, तर मी तुम्हाला rmdir डिलीट फंक्शन बदलून चाचणीसाठी प्रतिध्वनीमध्ये बदलण्याची शिफारस करतो की तुम्ही हटवू इच्छित असलेल्या फाइल्स हटवल्या जातील. Gif प्रीलोडर्स घेतले जाऊ शकतात, उदाहरणार्थ, माझ्या धड्यातून Gif ॲनिमेशन कसे बनवायचे. लेखाच्या शेवटी उदाहरणे.

UPD:

जर कोणाला सौंदर्य जोडायचे असेल, उदाहरणार्थ प्रोग्रेस बार, तर त्यासाठी आपल्याला कोडच्या काही ओळी जोडणे आवश्यक आहे. IN html टेम्पलेटआम्ही html5 - प्रगती मधून एक सुपर एलिमेंट जोडू आणि js कोडमध्ये XMLHttpRequest ऑब्जेक्टसह अनेक ओळी जोडू.
आणि म्हणून, आमचे html खालील गोष्टींसह पूरक असेल:

आणि आम्ही js कोडमध्ये जोडू:

फंक्शन प्रोग्रेस हँडलिंग फंक्शन(e)( if(e.lengthComputable)( $("progress").attr((value:e.loaded,max:e.total)); ) )

Xhr: function() ( var myXhr = $.ajaxSettings.xhr(); if(myXhr.upload)( // अपलोड केले जात आहे हे तपासत आहे myXhr.upload.addEventListener("progress",progressHandlingFunction, false); // फंक्शन व्हॅल्यूजकडे जात आहे) myXhr परत करा;

जेएस कोडचा अंतिम परिणाम:

$(document).ready(function())( function progressHandlingFunction(e)( if(e.lengthComputable)( $("progress").attr((value:e.loaded,max:e.total));) ) $("#preloader").hide(); $("#file").bind("change", function())( var data = new FormData(); var error = ""; jQuery.each( $( "#file").files, function(i, file) ( if(file.name.length)< 1) { error = error + " Файл имеет неправильный размер! "; } if(file.size >1000000) ( त्रुटी = त्रुटी + " फाइल " + file.name + " मोठे आहे."; ) if(file.type != "image/png" && file.type != "image/jpg" && !file. type != "image/gif" && file.type != "image/jpeg") ( error = error + "फाइल " + file.name + " png, jpg किंवा gif शी जुळत नाही"; ) data.append( "फाइल -"+i, फाइल); )); जर (त्रुटी != "") ($("#info").html(त्रुटी);) इतर ( $.ajax(( url: "productUploadImg.php", टाइप करा: "POST", xhr: function() ( var myXhr = $.ajaxSettings.xhr(); if(myXhr.upload)( // अपलोड प्रगतीपथावर आहे हे तपासत आहे myXhr.upload.addEventListener("progress",progressHandlingFunction, false); // फंक्शनची मूल्ये पास करणे ) myXhr परत करा ) , डेटा: डेटा, कॅशे: असत्य, सामग्री प्रकार: असत्य, प्रक्रिया डेटा: असत्य, आधी पाठवा: फंक्शन() ( $("#preloader").शो(); ), यश: फंक्शन(डेटा)( $( "#info" .html(डेटा); $("#preloader").hide(); error: errorHandler = function() ( $("#info").html("फाइल्स लोड करताना त्रुटी");) ) ) ) ));