በአጃክስ በኩል ምስልን ለመጫን ኮድ እንጽፋለን. ጃቫ ስክሪፕት እና JQuery ላይብረሪ በመጠቀም ፋይል ወደ አገልጋዩ በመስቀል ላይ

በአሁኑ ጊዜ, ድረ-ገጾች ከጊዜ ወደ ጊዜ በይነተገናኝ እየሆኑ መጥተዋል. ይህ ብቻ አይደለም የሚመለከተው ልዩ አገልግሎቶች፣ ግን እንዲሁም መደበኛ ኢንተርኔትሱቆች, ብሎጎች እና ትናንሽ ድር ጣቢያዎች. ዋናው ባህሪው ነው ያልተመሳሰለ ጃቫስክሪፕትእና ኤክስኤምኤል በምህፃረ ቃል AJAX ነው። ይህ ቴክኖሎጂ አሳሹን ይፈቅዳል ዳራከድር አገልጋይ ጋር መገናኘት እና ውሂብ ሲያዘምኑ ድረ-ገጹ ሙሉ በሙሉ እንደገና አይጫንም። በሌላ አነጋገር በአሳሹ ውስጥ ገጹን እንደገና ሳንጭን ጥያቄዎችን ማቅረብ እና ከአገልጋዩ ምላሽ መቀበል እንችላለን።

ከአብዛኛዎቹ ጀምሮ ታዋቂ ቋንቋየዌብ አፕሊኬሽኖችን ለማዳበር ፒኤችፒ ነው፣ ከዚያ ዛሬ የAJAX እና PHP ጥምርን እንጠቀማለን። ምሳሌው ከ AJAX እና PHP ጋር አብሮ የመስራትን መሰረታዊ መርሆችን ለመረዳት ጥሩ ይሆናል.

በእውነቱ ፣ ምንም ልዩ ችግሮች ሊኖሩ አይገባም ፣ የእርምጃዎች ስልተ ቀመር የሚከተለው ነው-

  • ስዕል ይምረጡ
  • "ላክ" የሚለውን ቁልፍ ጠቅ ያድርጉ
  • የቅጽ ጥሪን በ ጣል ያድርጉ ጃቫስክሪፕት በመጠቀም(jQuery)
  • ይዘትን ወደ ላክ ልዩ phpስክሪፕት ተቆጣጣሪ
  • የማስፈጸሚያ ውጤትን ይመልሱ
  • ጃቫስክሪፕት (jQuery) በመጠቀም ውጤቱን ያስኬዱ
  • የማውረድ መረጃን ለተጠቃሚው አሳይ
ስለ jQuery እና AJAX በአጭሩ

ከርዕሱ ትንሽ ራቅ ብዬ jQuery ምን እንደሆነ እገልጻለሁ። jQuery የድረ-ገጽ አፕሊኬሽኖችን ብዙ ጊዜ ለማቅለል የሚረዳ ልዩ የጃቫ ስክሪፕት ቤተ-መጽሐፍት ነው። ይህ ቤተ-መጽሐፍትከ AJAX ጋር ለመስራት ኤፒአይ ያቀርባል። በቀላል ቃላት, በንጹህ JS ውስጥ ካደረግነው ያነሰ ኮድ እንጽፋለን.

አጃክስ ከድር አገልጋይ ጋር ውሂብ ለመለዋወጥ እና ድረ-ገጹን እንደገና ሳይጭኑ ይዘቱን ለማዘመን ይፈቅድልዎታል።

ልማትን ያለ መዘዝ ለማፋጠን የሚያስችል መሳሪያ ካለ ለምን አትጠቀምበትም ብዬ ለማሰብ ያዘነብላል። ነገር ግን ንጹህ JS ማወቅም አይጎዳም (ምንም እንኳን የእኔ የግል የJS የብቃት ደረጃ ከተደራራቢ ፍሰት ምሳሌዎች ቅጂ-መለጠፍ ደረጃ ጋር እኩል ቢሆንም :))።

በአንድ ወቅት መፍታት ካለብኝ ችግሮች አንዱን ማለትም በቅድመ-እይታ ጣቢያ ላይ ምስል መጫንን እንመለከታለን። የእርስዎን አምሳያ በ VKontakte ላይ ከቀየሩ፣ ስለምጽፈው ነገር ይገባዎታል።

ያስፈልገናል 3 ቀላል ፋይል፣ ይህ፡-

  • የቅጽ ገጽ
  • php ተቆጣጣሪ
  • js ፋይል
index.html አጃክስ ስቀል ምስል ሰቀላ (!LANG፡ የምስል ፋይል፡

መደበኛ html ገጽከቅጽ ጋር. ለ enctype = "multipart/form-data" ትኩረት ይስጡ, ይህ ፋይሎችን ለማስተላለፍ አስፈላጊ ነው; ፋይሎችን እያስተላለፉ ከሆነ እሴቱ ሁል ጊዜ ባለብዙ ክፍል/ቅጽ-ዳታ መሆን አለበት።

handler.php // የፋይሎች ድርድር እና የተላለፈው ውሂብ ያለው ድርድር መጫኑን ያረጋግጡ( isset($_FILES) && isset($_FILES["ምስል")) (//የተዘዋወረውን ድርድር በተለዋዋጭ $ ያስቀምጡ ምስል = $_FILES["ምስል"];// የፋይሉን መጠን እና ካለፈ ያረጋግጡ የተሰጠው መጠን// የስክሪፕት አፈፃፀምን ያጠናቅቁ እና ስህተት ያሳዩ ($ ምስል ["መጠን"] > 200000) (ሞት("ስህተት")); "]); $imageFormat = $imageFormat; // ለምስሉ አዲስ ስም ይፍጠሩ። በአሮጌው // ማስቀመጥ ትችላለህ ግን ይህ አይመከርም $imageFullName = "./images/" . hash("crc32"፣ጊዜ())። "" . $imageFormat; // የምስሉን አይነት ወደ ተለዋዋጭ $imageType = $image["አይነት"] ያስቀምጡ; // አረጋግጥ የሚገኙ ቅርጸቶችምስሎች ከሆነ የምስል ግጥሚያዎች, // ምስሉን ወደ ምስሎች አቃፊው ይቅዱ ($imageType == "ምስል/jpeg" || $imageType == "ምስል/png") (ከሆነ (move_uploaded_file($image["tmp_name"]፣$imageFullName)) ( “ስኬት” አስተጋባ፤) ሌላ ( “ስህተት” አስተጋባ፤)))

ይህ በጣም ቀላል ተቆጣጣሪ ነው። የሃሽ ተግባርን በመጠቀም የምስሉን ስም ፈጠርኩት። ወደ አገልጋዩ በሚሰቅሉበት ጊዜ የፋይል ስሞችን መቀየር ጥሩ ነው.

ajaxupload.js $ (ሰነድ) .ዝግጁ (ተግባር () ተግባር readImage (ግቤት) (ከሆነ (input.files & & input.files) (var reader = አዲስ FileReader () አንባቢ.onload = ተግባር (ሠ) ($() "# ቅድመ እይታ") .attr ("src", e.target.result); reader.readAsDataURL(input.files) ተግባር printMessage(መድረሻ)($(መድረሻ))። "ስኬት") ( $(መድረሻ)።addClass("የማንቂያ ማንቂያ-ስኬት")።ጽሑፍ("ፋይል በተሳካ ሁኔታ ተሰቅሏል"); alert-danger").ጽሑፍ ("ፋይሉን በሚሰቀልበት ጊዜ ስህተት ተፈጥሯል" "ማስገባት"፣(ተግባር(ሠ) ( e.preventDefault()፤ var formData = አዲስ ፎርምዳታ(ይህ)፤ $.ajax((አይነት፡"POST"፣// የጥያቄ አይነት url:"hander.php"፣// ተቆጣጣሪ ስክሪፕት ዳታ፡ formData፣ // መሸጎጫውን የምናስተላልፈው መረጃ፡ ሐሰት፣ // በPOST ጥያቄዎች በነባሪነት ተሰናክሏል፣ ነገር ግን ደህንነቱ የተጠበቀ ይዘት እንጫወትበት ዓይነት፡ ሐሰት፣ // የውሂብ ኢንኮዲንግ አይነትን በቅጹ ላይ እናስቀምጣለን፣ እኛ እናደርጋለን ይህን ሂደት አሰናክልData: false, // ማሰናከል ምክንያቱም የፋይሉን ስኬት: ተግባር (ዳታ) ( printMessage ("#ውጤት", ውሂብ) እያለፍን ነው; ), ስህተት: ተግባር (ዳታ) (ኮንሶል.ሎግ (ዳታ);))); ))); ));

በጣም የሚያስደስት ነገር በዚህ ስክሪፕት ውስጥ ይከሰታል. የ readImage() ተግባርን በመጠቀም ፋይሉን ከቅጽ መስኩ ላይ እናነባለን እና ወደ እገዳው እናስተላልፋለን። ቅድመ እይታ. የፋይል አንባቢ ነገር ተፈጥሯል። የድር መተግበሪያ በተጠቃሚው ኮምፒውተር ላይ ያለውን ፋይል ይዘት እንዲያነብ ያስችለዋል። የ.የተጫነው ክስተት ይዘቱ ሲነበብ ይቃጠላል፣ ይህንን ክስተት ተጠቅመን ምስሉን በቅድመ እይታ እገዳ ውስጥ እናሳያለን።
እና በመጨረሻም የ .readAsDataURL() ዘዴ ፋይሉን የማንበብ ሂደት ይጀምራል, አንብበው ሲጨርሱ የ.onload ክስተት ይከናወናል እና ምስሉ በስክሪኑ ላይ ይታያል.

የህትመት መልእክት ተግባር የተሳካ ወይም ያልተሳካ ፋይልን ለማውረድ የተደረገ ሙከራ መረጃን ለማሳየት የተነደፈ ነው። እኛ በዝርዝር አንመለከትም; ምንም ልዩ ነገር አይወክልም.

የቅጹን እና የአሰራር ሂደቱን መጥለፍ. “አስገባ” የሚለውን ቁልፍ ሲጫኑ ክስተቱ በስክሪፕቱ ይቋረጣል እና .preventDefault() ተግባርን በመጠቀም ቅጹ መረጃን ወደ index.html አይልክም። .preventDefault() ማንኛውም ክስተቶች እንዳይነሱ ለመከላከል ይጠቅማል።

ለ FormData ነገር እንፈልጋለን POST መፍጠርወደ ስክሪፕታችን ስንጠይቅ፣ እያንዳንዱን የቅጽ አካል ወደ መስመር ከመግባት የበለጠ ቀላል ነው። አንድ ነገር ፈጥረን በመረጃ ሞላን እና ወደ አጃክስ ልከናል።

ደህና ፣ በእውነቱ የ AJAX ጥያቄ ራሱ። የ jQuery ቤተ መፃህፍት እየተጠቀምን ስለሆነ እንደዚህ አይነት ጥያቄ መፍጠር እና ማስፈፀም ምንም አይነት ችግር አይፈጥርብዎትም።

በእውነቱ፣ እዚህ እንጨርስ። ምስሉ ይጫናል, ገጹ እንደገና አይጫንም, ሁሉም ሰው ደስተኛ ነው. ጥያቄዎች ወይም ጥቆማዎች ካሉዎት አስተያየቶችን ይጻፉ።

መልካም ቀን እና መልካም እድል :)

መረጃን ለማውጣት እና በAJAX ጥያቄ ለማስተላለፍ ብዙ መሰረታዊ ዘዴዎችን አልፈናል። አሁን AJAX በመጠቀም ፋይሎችን እንዴት መስቀል እንደሚችሉ ለመነጋገር ጊዜው አሁን ነው። እስከ ቅርብ ጊዜ ድረስ ገጹን ራሱ ሳይጭኑ ፋይሎችን ለማውረድ ብዙ መንገዶች አልነበሩም (የተደበቀ iframe ፣ Flash)። ዛሬም ጥቅም ላይ ይውላሉ ምክንያቱም አሁንም በሂደት ያልተነኩ የቆዩ የአሳሽ ስሪቶች ያላቸው ተጠቃሚዎች አሉ። ግን ወደ ኋላ አንመለከትም, ስለዚህ ከዘመኑ ጋር እንራመዳለን.

በእኔ አስተያየት ከምርቶቹ ውስጥ አንዱን እናስብ ምቹ መንገዶችከፋይሎች ጋር ለመስራት (እና ብቻ ሳይሆን) - የ FormData ነገር. የተጠቃሚውን አምሳያ ለመጫን እንደዚህ ያለ ቀላል ቅጽ ይሁን።

ኤችቲኤምኤል ( index.html ፋይል)

ሙሉ ስም፥
አምሳያ፡

ወደ JS ክፍል እንሂድ። በ "ሙሉ ስም" መስክ ምንም ችግሮች አይኖሩም እና ከፋይሉ ጋር ሌላ ማንኛውንም ውሂብ መላክ እንደምንችል ለማሳየት ብቻ እንጠቀማለን.

jQuery( script.js ፋይል)

$(ተግባር())($("#my_form"))።ላይ("ማስረከብ"፣ ተግባር(ሠ)(e.preventDefault()(e.preventDefault()፣ var $ that = $(this)፣ formData = new FormData($ that.get ( 0) ); // አዲስ የነገር ምሳሌ ይፍጠሩ እና የእኛን ቅጽ ወደ እሱ (*) $ .ajax (( url: $ that.attr ("እርምጃ"), ይተይቡ: $ that.attr ("ዘዴ"), ይዘት አይነት: ሐሰት, // አስፈላጊ - ነባሪውን የውሂብ ቅርጸት ሂደት ያስወግዱ ውሂብ: ሐሰት, // አስፈላጊ - ነባሪ የሕብረቁምፊ ልወጣ ውሂብን ያስወግዱ: formData, dataType: "json", ስኬት: ተግባር (json) (ከሆነ (json) ( $ ያ .ምትክ (json);

(*) ቅጹን እንደማናቀርብ እባክዎ ልብ ይበሉ jQuery ነገርእና የ DOM አባል

ፒኤችፒ ተቆጣጣሪ ( ፋይል ተቆጣጣሪ.php)

ሁሉም html ኮድ jsን ጨምሮ፡-

ይህን ፋይል አስገባ፡ $("ቅጽ") ስቀል (ተግባር(e) ( var formData = new FormData($(this)))፤ $.ajax(( url: "file.php")፣ አይነት:"POST"፣ ዳታ፡ formData፣ async: false፣ ስኬት፡ ተግባር (msg) (ማስጠንቀቂያ(msg))፣ስህተት፡ ተግባር(msg)(ማስጠንቀቂያ("ስህተት!"))፣መሸጎጫ፡ሀሰት፣ይዘት አይነት፡ውሸት፣ሂደትዳታ፡ውሸት )) e.preventDefault();

የምንጭ ኮድ ፋይል አውርድ

ፋይሎችን ወይም ምስሎችን ወደ አገልጋይ መስቀል በጣም የተለመደ ተግባር ነው። ግን መሻሻል አሁንም አይቆምም ፣ እና ስለዚህ አሁን ፣ በእርግጥ ፣ ፋይሎች ከበስተጀርባ እንዲወርዱ እፈልጋለሁ። እንደ ደንቡ, ከዚህ ቀደም ይህ በመጠቀም ሊተገበር ይችላል የፍላሽ ቴክኖሎጂዎችወይም iframe. እንዲሁም ብዙ ሰዎች እንደ jQuery Form Plugin ወይም Ajax File Upload Plugin ወይም Multiple File Upload Plugin እና የሌሎችን ባህር የመሳሰሉ ተሰኪዎችን ይጠቀማሉ። የ FormData ነገር በመምጣቱ ሁሉም ነገር በጣም ቀላል ሆኗል. FormData() XMLHttpRequestን ተጠቅመው ወደ አገልጋዩ የሚልኩትን የውሂብ ስብስብ እንዲያዘጋጁ ይፈቅድልዎታል።

ከበስተጀርባ ምስሎችን ወይም ፋይሎችን ለመስቀል የራሳችንን ኮድ ያለምንም ፕለጊን ለመጻፍ እንሞክር (በእርግጥ ከ jQuery ማዕቀፍ በስተቀር)። በአጠቃላይ የድርጊታችን ስልተ ቀመር እንደዚህ ያለ ነገር ይሆናል-የቅጽ መስኮችን በውሂብ ይሙሉ። መስኮቹ ማንኛውም፣ ጽሑፍ፣ ጽሑፍ፣ ምረጥ እና ፋይሎች ሊሆኑ ይችላሉ። ፋይሎችን በሚመርጡበት ጊዜ ለ jQuery ኮድ ምስጋና ይግባውና እነዚህ ፋይሎች ከበስተጀርባ ወደ አገልጋዩ ጊዜያዊ ማውጫ ለምሳሌ "tmp" ይወርዳሉ. በመቀጠል አዝራሩን ሲጫኑ ቅጾችን አስገባ, ውሂቡ ውሂቡን ወደሚያሰራው የአገልጋይ ስክሪፕት ይላካል. እነዚህ ጽሑፎች እንደሆኑ እናስብ። የተላለፈውን መረጃ በልዩ መታወቂያ በመረጃ ቋት ውስጥ እንቀዳለን። በመቀጠል በ "ምስሎች" ማውጫ ውስጥ ልዩ የሆነ ቁጥር "id" ያለው ማውጫ እንፈጥራለን እና በ"tmp" አቃፊ ውስጥ ምንም አይነት ፋይሎች ካሉን ወደተፈጠረው "id" አቃፊ እንቀዳቸዋለን ከዚያም "tmp" እናጸዳለን. ” አቃፊ። ለማጠቃለል-ስዕሎቹን ወደ tmp እንደ ዳራ እንሞላለን ፣ ቅጹን ስናስገባ ውሂቡን ወደ ዳታቤዝ እንጽፋለን ፣ ይኖረናል ። ልዩ ቁጥርመዝገቦች. በዚህ ቁጥር አቃፊ እንፈጥራለን እና ፋይሎቻችንን ወደዚያ እናንቀሳቅሳለን. ሁሉም። በዚህ ጽሑፍ ውስጥ ወደ ዳታቤዝ መስቀል እና ፋይሎችን መቅዳት አናስብም። እዚህ ለሁሉም ሰው የሚሆን ነገር ይኖራል ብዬ አስባለሁ. በአንድ ነገር ላይ እናተኩራለን- ያልተመሳሰለ ጭነትስዕሎች (ወይም ፋይሎች)።

ስለዚህ የእኛ የኤችቲኤምኤል ቁራጭ እዚህ አለ። እዚህ ላይ ትኩረት እንሰጣለን GIF ፋይል ከቅጦች ጋር ከማሳየት የምንደብቀው የቅድመ ጫኚ (looped Circle) ምስል ያለው። እንዲሁም id = ፋይልን በፋይል መስኩ ላይ እና enctype = "multipart/form-data" በቅጹ ላይ እንመድባለን። የፋይሉ መስክ ስም ፋይል ይሆናል ማለትም. ብዙ ፋይሎችን (በርካታ ባህሪ) መስቀል ስለተፈቀደልን ከድርድሩ ጋር መሥራት እንድንችል።

#ቅድመ ጫኚ (ታይነት፡ የተደበቀ፤) መረጃ ያክሉ

በዚህ ቅጽ፣ ከፋይል መስኩ በተጨማሪ፣ ለምሳሌ ሁለት መስኮች አሉን፡ ግብአት=ጽሑፍ። እነዚያ። ከፊት ለፊታችን መደበኛ ቅጽለምሳሌ, ለአስተዳዳሪው ፓነል, እሱም የሚፈልጉት የመስኮች ስብስብ ነው. ለመጀመር፣ ከፈለጉ፣ በፋይሉ መጀመሪያ ላይ የFILES ድርድርን የሚያሳዩ መስመሮችን በመፃፍ የስክሪፕቱን አሠራር ማረጋገጥ ይችላሉ።

// upload.php print_r($_FILES);

አሁን የኛን አገልጋይ ስክሪፕት እንፃፍ፣ እሱም ከ የሚጠራው። jQuery በመጠቀም. የእሱ ተግባር የተሰቀሉትን ፋይሎች ከአገልጋዩ ጊዜያዊ ማውጫ ወደ እኛ ማዛወር ነው ፣ ለምሳሌ ፣ በ “tmp” ውስጥ እንደወሰንነው እና ከዚያ እነሱን ያሳዩ።

//upload.php ተግባር show_dir($dir) // ከ tmp አቃፊ ውስጥ ምስሎችን የማሳየት ተግባር ($list = scandir($dir)፤ ያልተቀናበረ($ዝርዝር፣$ዝርዝር)፤ foreach ($ዝርዝር እንደ $ፋይል) (ማስተጋባት) " "; ) ) foreach ($ _FILES እንደ $ key => $እሴት) (\//ፋይሎችን ወደ tmp move_uploaded_file ($ value ["tmp_name"), "tmp/" $ እሴት["ስም"]);) show_dir ("./tmp/");

እና አሁን የኛ js ስክሪፕት፣ ፋይሎቻችንን ከበስተጀርባ ወደ አገልጋዩ የሚሰቅለው። ለ FormData() ነገር ምስጋና ይግባው ሁሉም አስማት ይፈጸማል። ይህን ኮድ ከመለያው በፊት ወደ index.php መጨረሻ እንጨምረዋለን።

$(ሰነድ)።ዝግጁ(ተግባር())($("#ቅድመ ጫኚ"))።ደብቅ()፤$("#ፋይል")።ቢንድ("ለውጥ"፣ተግባር())(var data = new FormData() ; var ስህተት = ""; jQuery.each ($ ("#ፋይል").ፋይሎች, ተግባር (i, ፋይል) (file.name.length ከሆነ).< 1) { error = error + " Файл имеет неправильный размер! "; } //Проверка на длину имени if(file.size >1000000) (ስህተት = ስህተት + "ፋይል" + ፋይል ስም + "ትልቅ ነው። "" && !file.type != "image/gif" && file.type != "image/jpeg") (ስህተት = ስህተት + "ፋይል" + ፋይል ስም + "png፣ jpg ወይም gif አይዛመድም" ; ) //የፋይል ዓይነቶችን ዳታ በመፈተሽ ላይ። )); ከሆነ (ስህተት! = "") ($("#መረጃ").html (ስህተት);) ሌላ ( $.ajax (( url: "upload.php", ውሂብ: ውሂብ, መሸጎጫ: ሐሰት, ይዘት ዓይነት: ሐሰት, processData: false, type: "POST", ከመላክ በፊት: ተግባር () ($("#ቅድመ ጫኚ").ሾው();), ስኬት: ተግባር (ዳታ) ($("#መረጃ").html(ዳታ); $("# preloader") .ደብቅ();

እንግዲህ ያ ብቻ ይመስላል። የሆነ ነገር የማይረዳ ካለ ይጠይቁ። ማንም ተጨማሪዎች ካሉኝ እኔም ደስ ይለኛል!
ጠቃሚ ምክር፡ ከየትኛውም ዳይሬክተሩ ላይ ፋይሎችን ለመሰረዝ እስካሁን ድረስ ኮድን ካልተጠቀምክ፣ መሰረዝ የምትፈልጋቸው ፋይሎች ብቻ እንደሚሰረዙ ለማረጋገጥ የ rmdir delete ተግባርን ለመቀየር ለሙከራ አስተጋባ። Gif preloaders ለምሳሌ ከትምህርቴ እንዴት Gif እነማ መስራት እንደሚቻል መውሰድ ይቻላል። በአንቀጹ መጨረሻ ላይ ምሳሌዎች.

ወደላይ

ማንም ሰው ውበትን ለመጨመር ከፈለገ ለምሳሌ የሂደት አሞሌ , ከዚያ ለዚህ ጥቂት የኮድ መስመሮችን ማከል ያስፈልገናል. ውስጥ html አብነትከኤችቲኤምኤል 5 አንድ ሱፐር ኤለመንት እንጨምራለን - እድገት እና በ js ኮድ ውስጥ ከXMLHttpጥያቄ ነገር ጋር ብዙ መስመሮችን እንጨምራለን ።
እና ስለዚህ፣ የእኛ html በሚከተለው ይሟላል።

እና ወደ js ኮድ እንጨምራለን-

የተግባር ግስጋሴ አያያዝ ተግባር(ሠ)(ከሆነ(e.lengthComputable)($("ሂደት").attr((ዋጋ፡e.ተጭኗል፣max:e.ጠቅላላ)));))

Xhr: ተግባር () (var myXhr = $.ajaxSettings.xhr() ከሆነ(myXhr.upload)(// ሰቀላው እየተካሄደ መሆኑን ማረጋገጥ myXhr.upload.addEventListener("ግስጋሴ"፣ሂደትHandlingFunction፣ውሸት)፤ // ወደ ተግባር እሴቶች ማለፍ) myXhr መመለስ;

የ js ኮድ የመጨረሻ ውጤት፡-

$ (ሰነድ) .ዝግጁ (ተግባር ()) ( ተግባር progressHandlingFunction (ሠ) (ከሆነ (e.lengthComputable) ($ ("ሂደት").attr ((እሴት: e. ተጭኗል, ከፍተኛ: e. ጠቅላላ));) ) $ ("# ቅድመ ጫኚ") .ደብቅ (); $ ("#ፋይል"). ማሰር ("ለውጥ", ተግባር ()) (var ውሂብ = አዲስ FormData (); var ስህተት = ""; jQuery.each () $("#ፋይል").ፋይሎች፣ ተግባር(i፣ ፋይል) (ፋይል.ስም.ርዝመት ከሆነ)< 1) { error = error + " Файл имеет неправильный размер! "; } if(file.size >1000000) (ስህተት = ስህተት + "ፋይል" + ፋይል ስም + "ትልቅ ነው። አይነት != "image/gif" && file.type != "image/jpeg") (ስህተት = ስህተት + "ፋይል" + file.name + "png, jpg ወይም gif" አይዛመድም; ) data.append() "ፋይል -"+ i, ፋይል); )); ከሆነ (ስህተት! = "") ($("#መረጃ").html (ስህተት);) ሌላ ( $.ajax (( url: "productUploadImg.php", ዓይነት: "POST", xhr: ተግባር () () var myXhr = $.ajaxSettings.xhr() ከሆነ(myXhr.upload)(// ሰቀላው በሂደት ላይ መሆኑን ማረጋገጥ myXhr.upload.addEventListener("ግስጋሴ"፣የሂደት አያያዝ ተግባር፣ውሸት)፤ //እሴቶችን ወደ ተግባር ማለፍ myXhr መመለስ)፣ ዳታ፡ ዳታ፣ መሸጎጫ፡ ሐሰት፣ ይዘት ዓይነት፡ ሐሰት፣ ሂደት ዳታ፡ ሐሰት፣ ከመላኩ በፊት፡ ተግባር() ($("#ቅድመ ጫኚ")። አሳይ()፣ ስኬት፡ ተግባር(ዳታ)($() "#መረጃ" ).html (ዳታ); $ ("# ቅድመ ጫኚ").ደብቅ (); ))))))