សព្វ​ថ្ងៃ​នេះ គេហទំព័រ​កាន់​តែ​មាន​អន្តរកម្ម។ នេះអនុវត្តមិនត្រឹមតែប៉ុណ្ណោះទេ សេវាកម្មឯកទេសប៉ុន្តែផងដែរ។ អ៊ីនធឺណិតធម្មតា។ហាង ប្លុក និងគេហទំព័រតូចៗ។ លក្ខណៈសំខាន់គឺ JavaScript អសមកាលនិង XML ត្រូវបានកាត់ជា AJAX ។ បច្ចេកវិទ្យានេះអនុញ្ញាតឱ្យកម្មវិធីរុករក ផ្ទៃខាងក្រោយទំនាក់ទំនងជាមួយម៉ាស៊ីនមេគេហទំព័រ ហើយនៅពេលធ្វើបច្ចុប្បន្នភាពទិន្នន័យ គេហទំព័រមិនផ្ទុកឡើងវិញទាំងស្រុងទេ។ ម្យ៉ាងវិញទៀត យើងអាចធ្វើការស្នើសុំ និងទទួលការឆ្លើយតបពីម៉ាស៊ីនមេ ដោយមិនចាំបាច់ផ្ទុកទំព័រឡើងវិញនៅក្នុងកម្មវិធីរុករក។

ចាប់តាំងពីភាគច្រើន ភាសាពេញនិយមដើម្បីបង្កើតកម្មវិធីគេហទំព័រគឺ PHP បន្ទាប់មកថ្ងៃនេះយើងនឹងប្រើការរួមបញ្ចូលគ្នានៃ AJAX និង PHP ។ ឧទាហរណ៍នឹងល្អសម្រាប់ការយល់ដឹងអំពីគោលការណ៍ជាមូលដ្ឋាននៃការធ្វើការជាមួយ AJAX និង PHP ។

តាមពិតមិនគួរមានការលំបាកពិសេសណាមួយទេ ក្បួនដោះស្រាយនៃសកម្មភាពគឺ៖

• ជ្រើសរើសរូបភាព
• ចុចប៊ូតុង "ផ្ញើ"
• ស្កាត់ការហៅទម្រង់បែបបទជាមួយ ដោយប្រើ JavaScript(jQuery)
• ផ្ញើខ្លឹមសារទៅ php ពិសេសកម្មវិធីគ្រប់គ្រងស្គ្រីប
• ត្រឡប់លទ្ធផលប្រតិបត្តិ
• ដំណើរការលទ្ធផលដោយប្រើ JavaScript (jQuery)
• បង្ហាញព័ត៌មានទាញយកទៅអ្នកប្រើប្រាស់

សង្ខេបអំពី jQuery និង AJAX

ខ្ញុំនឹងងាកចេញពីប្រធានបទបន្តិច ហើយពន្យល់ថា jQuery ជាអ្វី។ jQuery គឺជាបណ្ណាល័យ JavaScript ពិសេសដែលជួយសម្រួលដល់ការអភិវឌ្ឍន៍កម្មវិធីគេហទំព័រជាច្រើនដងផងដែរ។ បណ្ណាល័យនេះ។ផ្តល់ API សម្រាប់ធ្វើការជាមួយ AJAX ។ នៅក្នុងពាក្យសាមញ្ញយើងនឹងសរសេរកូដតិចជាងប្រសិនបើយើងបានធ្វើវានៅក្នុង JS សុទ្ធ។

Ajax អនុញ្ញាតឱ្យអ្នកផ្លាស់ប្តូរទិន្នន័យជាមួយម៉ាស៊ីនមេគេហទំព័រ និងធ្វើបច្ចុប្បន្នភាពមាតិការបស់វាដោយមិនចាំបាច់ផ្ទុកទំព័របណ្តាញឡើងវិញ។

ខ្ញុំមានទំនោរគិតថាប្រសិនបើមានឧបករណ៍ដែលអនុញ្ញាតឱ្យអ្នកបង្កើនល្បឿននៃការអភិវឌ្ឍន៍ដោយគ្មានផលវិបាក នោះហេតុអ្វីមិនប្រើវា? ប៉ុន្តែវានឹងមិនឈឺចាប់ក្នុងការស្គាល់ JS សុទ្ធទេ (ទោះបីជាកម្រិតជំនាញ JS ផ្ទាល់ខ្លួនរបស់ខ្ញុំគឺស្មើនឹងកម្រិតនៃការចម្លង-បិទភ្ជាប់ឧទាហរណ៍ពី stackoverflow :)) ។

យើង​នឹង​មើល​បញ្ហា​មួយ​ក្នុង​ចំណោម​បញ្ហា​ដែល​ខ្ញុំ​ធ្លាប់​ត្រូវ​ដោះស្រាយ​នោះ​គឺ​ការ​ផ្ទុក​រូបភាព​ទៅ​លើ​គេហទំព័រ​ដែល​មាន​ការ​មើល​ជាមុន។ ប្រសិនបើអ្នកបានផ្លាស់ប្តូររូបតំណាងរបស់អ្នកនៅលើ VKontakte អ្នកយល់ពីអ្វីដែលខ្ញុំកំពុងសរសេរ។

យើងត្រូវការ ៣ ឯកសារសាមញ្ញ, នេះ៖

• ទំព័រទម្រង់
• កម្មវិធីគ្រប់គ្រង php
• ឯកសារ js

index.html Ajax Upload រូបភាពផ្ទុកឡើង ឯកសាររូបភាព៖

ទៀងទាត់ ទំព័រ htmlជាមួយនឹងទម្រង់។ យកចិត្តទុកដាក់ចំពោះ enctype="multipart/form-data", នេះត្រូវការជាចាំបាច់ដើម្បីផ្ទេរឯកសារ ប៉ារ៉ាម៉ែត្របង្ហាញពីវិធីសាស្រ្តនៃការអ៊ិនកូដទិន្នន័យ។ ប្រសិនបើអ្នកកំពុងផ្ទេរឯកសារ តម្លៃគួរតែជា multipart/form-data ជានិច្ច។

handler.php // ពិនិត្យមើលថាតើអារេនៃឯកសារ និងអារេជាមួយទិន្នន័យដែលបានផ្ទេរត្រូវបានដំឡើងប្រសិនបើ(isset($_FILES) && isset($_FILES["រូបភាព"])) ( // រក្សាទុកអារេដែលបានផ្ទេរក្នុងអថេរ $ image = $_FILES["image"]; // ពិនិត្យទំហំឯកសារ ហើយប្រសិនបើវាលើស ទំហំដែលបានផ្តល់ឱ្យ// ដំណើរការស្គ្រីបពេញលេញ និងបង្ហាញកំហុសប្រសិនបើ ($image["size"]> 200000) ( die("error"); ) // ទទួលបានទម្រង់រូបភាព $imageFormat = explode(", $image["name "]); $imageFormat = $imageFormat;// បង្កើតឈ្មោះថ្មីសម្រាប់រូបភាព។ អ្នកអាចរក្សាទុកជាមួយឯកសារចាស់ // ប៉ុន្តែនេះមិនត្រូវបានណែនាំ $imageFullName = "./images/" ទេ។ hash("crc32",time())។ "។" . $imageFormat; // រក្សាទុកប្រភេទរូបភាពទៅជាអថេរ $imageType = $image["type"];// ពិនិត្យ

ទម្រង់ដែលអាចប្រើបាន

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); "success") ( $(destination).addClass("alert alert-success").text("ឯកសារបានផ្ទុកឡើងដោយជោគជ័យ។"); ) if (msg == "error") ($(destination).addClass("alert alert-danger". "submit",(function(e)( e.preventDefault(); var formData = new FormData(this); $.ajax(( type:"POST", // ស្នើសុំប្រភេទ url: " handler.php", // ទិន្នន័យស្គ្រីបអ្នកដោះស្រាយ៖ formData // ទិន្នន័យដែលយើងឆ្លងកាត់ឃ្លាំងសម្ងាត់៖ មិនពិត // នៅក្នុងសំណើ POST វាត្រូវបានបិទតាមលំនាំដើម ប៉ុន្តែសូមឱ្យវាលេងដោយសុវត្ថិភាព មាតិកាប្រភេទ៖ មិនពិត // យើងកំណត់ប្រភេទការអ៊ិនកូដទិន្នន័យក្នុងទម្រង់ យើងនឹង បិទដំណើរការនេះ ទិន្នន័យ៖ មិនពិត // បិទដោយសារតែយើងកំពុងឆ្លងកាត់ឯកសារជោគជ័យ៖ មុខងារ(ទិន្នន័យ)( printMessage("#result", data);

), error:function(data)( console.log(data); ) )); ))); ));អ្វីដែលគួរឱ្យចាប់អារម្មណ៍បំផុតកើតឡើងនៅក្នុងស្គ្រីបនេះ។ ដោយប្រើមុខងារ readImage() យើងនឹងអានឯកសារពីប្រអប់ទម្រង់ ហើយបញ្ជូនវាទៅប្លុកសម្រាប់
ការមើលជាមុន

. វត្ថុ FileReader ត្រូវបានបង្កើត។ វាអនុញ្ញាតឱ្យកម្មវិធីបណ្តាញអានមាតិកានៃឯកសារនៅលើកុំព្យូទ័ររបស់អ្នកប្រើ។ ព្រឹត្តិការណ៍ .onload នឹងដំណើរការនៅពេលដែលមាតិកាត្រូវបានអាន ដោយប្រើព្រឹត្តិការណ៍នេះ យើងនឹងបង្ហាញរូបភាពនៅក្នុងប្លុកមើលជាមុន។

ហើយចុងក្រោយ វិធីសាស្ត្រ .readAsDataURL() ចាប់ផ្តើមដំណើរការអានឯកសារ នៅពេលបញ្ចប់ការអានព្រឹត្តិការណ៍ .onload នឹងត្រូវបានប្រតិបត្តិ ហើយរូបភាពនឹងបង្ហាញនៅលើអេក្រង់របស់អ្នក។

មុខងារ printMessage ត្រូវបានរចនាឡើងដើម្បីបង្ហាញព័ត៌មានអំពីការព្យាយាមទាញយកឯកសារដោយជោគជ័យ ឬបរាជ័យ។ យើង​មិន​មើល​វា​លម្អិត​ទេ វា​មិន​តំណាង​ឱ្យ​អ្វី​ពិសេស។ ការស្កាត់ទម្រង់បែបបទ និងដំណើរការរបស់វា។ នៅពេលអ្នកចុចលើប៊ូតុង “ដាក់ស្នើ” ព្រឹត្តិការណ៍នឹងត្រូវបានស្ទាក់ចាប់ដោយស្គ្រីប ហើយប្រើមុខងារ .preventDefault() ទម្រង់នឹងមិនបញ្ជូនទិន្នន័យទៅ index.html ទេ។ .preventDefault() ត្រូវបានប្រើដើម្បីការពារព្រឹត្តិការណ៍ណាមួយពីការលើកឡើង។យើងត្រូវការវត្ថុ FormData សម្រាប់

តាមពិត AJAX ស្នើសុំខ្លួនឯង។ ដោយសារយើងកំពុងប្រើបណ្ណាល័យ jQuery ការបង្កើត និងដំណើរការសំណួរបែបនេះនឹងមិនបង្កបញ្ហាដល់អ្នកទេ។

តាមពិតទៅ សូមបញ្ចប់នៅទីនេះ។ រូបភាពផ្ទុកឡើង ទំព័រមិនផ្ទុកឡើងវិញ គ្រប់គ្នាសប្បាយចិត្ត។ ប្រសិនបើអ្នកមានសំណួរ ឬសំណូមពរ សូមសរសេរមតិយោបល់។

សូមអោយមានថ្ងៃល្អ និងសំណាងល្អ :)

យើងបានឆ្លងកាត់វិធីសាស្រ្តជាមូលដ្ឋានមួយចំនួនសម្រាប់ការទាញយកទិន្នន័យ និងឆ្លងកាត់វាជាមួយនឹងសំណើ AJAX ។ ឥឡូវនេះវាដល់ពេលហើយដើម្បីនិយាយអំពីរបៀបដែលអ្នកអាចផ្ទុកឯកសារដោយប្រើ AJAX ។ រហូតមកដល់ពេលថ្មីៗនេះ មានវិធីមិនច្រើនទេក្នុងការទាញយកឯកសារដោយមិនចាំបាច់ផ្ទុកទំព័រឡើងវិញ (hidden iframe, Flash)។ ពួកវានៅតែត្រូវបានប្រើប្រាស់សព្វថ្ងៃនេះ ដោយសារនៅតែមានអ្នកប្រើប្រាស់ដែលមានកំណែចាស់នៃកម្មវិធីរុករកដែលមិនត្រូវបានប៉ះពាល់ដោយដំណើរការ។ ប៉ុន្តែ​យើង​មិន​ងាក​ក្រោយ​ទេ ដូច្នេះ​យើង​តាម​ទាន់​ពេលវេលា។

ចូរយើងពិចារណាតាមគំនិតរបស់ខ្ញុំ មួយក្នុងចំណោមភាគច្រើនបំផុត។ មធ្យោបាយងាយស្រួលសម្រាប់ធ្វើការជាមួយឯកសារ (មិនត្រឹមតែប៉ុណ្ណោះ) - វត្ថុ FormData ។ សូម​ឲ្យ​មាន​ទម្រង់​សាមញ្ញ​មួយ​សម្រាប់​ផ្ទុក​រូប​តំណាង​របស់​អ្នក​ប្រើ៖

HTML ( ឯកសារ index.html)

ឈ្មោះពេញ៖
រូបតំណាង៖

ចូរបន្តទៅផ្នែក JS ។ វានឹងមិនមានការពិបាកជាមួយវាល "ឈ្មោះពេញ" ទេ ហើយយើងប្រើវាដើម្បីបង្ហាញថា រួមជាមួយឯកសារនោះ យើងអាចផ្ញើទិន្នន័យផ្សេងទៀតបាន។

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("action"), type: $that.attr("method"), ប្រភេទមាតិកា៖ មិនពិត , // សំខាន់ - យើងដកដំណើរការធ្វើទ្រង់ទ្រាយទិន្នន័យលំនាំដើម ទិន្នន័យ៖ មិនពិត // សំខាន់ - យើងដកទិន្នន័យបំលែងខ្សែអក្សរលំនាំដើម៖ ទម្រង់ទិន្នន័យ ប្រភេទទិន្នន័យ៖ "json" ជោគជ័យ៖ មុខងារ(json)(ប្រសិនបើ(json)( $that.replaceWith(json);

(*) សូមចំណាំថាយើងមិនដាក់ទម្រង់បែបបទទេ។ វត្ថុ jQueryនិងធាតុ DOM

កម្មវិធីដោះស្រាយ PHP ( ឯកសារ handler.php)

ទាំងអស់។ កូដ htmlរួមទាំង js:

ដាក់ស្នើឯកសារនេះ៖ ផ្ទុកឡើង $("form").submit(function(e)) ( var formData = new FormData($(this)); $.ajax(( url: "file.php", type: "POST", ទិន្នន័យ៖ formData, async: false, success: function (msg) ( alert(msg); ), error: function(msg) ( alert("Error!"); ), cache: false, contentType: false, processData: false )); e.preventDefault();

ទាញយកឯកសារកូដប្រភព៖

ការអាប់ឡូតឯកសារ ឬរូបភាពទៅកាន់ម៉ាស៊ីនមេ គឺជាកិច្ចការធម្មតា។ ប៉ុន្តែវឌ្ឍនភាពមិនស្ថិតស្ថេរទេ ដូច្នេះហើយឥឡូវនេះ ពិតណាស់ខ្ញុំចង់ឱ្យឯកសារត្រូវបានទាញយកនៅក្នុងផ្ទៃខាងក្រោយ។ តាមក្បួនមួយពីមុននេះអាចត្រូវបានអនុវត្តដោយប្រើ បច្ចេកវិទ្យា flashឬ iframe ។ ដូចគ្នានេះផងដែរ, មនុស្សជាច្រើនប្រើកម្មវិធីជំនួយដូចជា jQuery Form Plugin ឬ Ajax File Upload Plugin ឬ Multiple File Upload Plugin និងសមុទ្រផ្សេងទៀត។ ជាមួយនឹងការមកដល់នៃវត្ថុ FormData អ្វីគ្រប់យ៉ាងបានក្លាយទៅជាសាមញ្ញជាង។ FormData() អនុញ្ញាតឱ្យអ្នកសរសេរសំណុំទិន្នន័យដើម្បីផ្ញើទៅម៉ាស៊ីនមេដោយប្រើ XMLHttpRequest ។

ចូរយើងព្យាយាមសរសេរកូដរបស់យើងដោយគ្មានកម្មវិធីជំនួយណាមួយ (ជាការប្រសើរណាស់ លើកលែងតែ jQuery framework ជាការពិត) ដើម្បីផ្ទុករូបភាព ឬឯកសារទៅម៉ាស៊ីនមេក្នុងផ្ទៃខាងក្រោយ។ ជាទូទៅ ក្បួនដោះស្រាយនៃសកម្មភាពរបស់យើងនឹងមានលក្ខណៈដូចនេះ៖ បំពេញទម្រង់បែបបទជាមួយទិន្នន័យ។ វាលអាចជាអ្វីក៏បាន អត្ថបទ ផ្ទៃអត្ថបទ ជ្រើសរើស និងឯកសារ។ នៅពេលអ្នកជ្រើសរើសឯកសារ អរគុណចំពោះកូដ jQuery របស់យើង ឯកសារទាំងនេះនឹងត្រូវបានទាញយកនៅក្នុងផ្ទៃខាងក្រោយទៅកាន់ថតបណ្តោះអាសន្ននៅលើម៉ាស៊ីនមេ ឧទាហរណ៍ "tmp" ។ បន្ទាប់មកនៅពេលអ្នកចុចប៊ូតុង ដាក់ស្នើទម្រង់ទិន្នន័យត្រូវបានផ្ញើទៅស្គ្រីបម៉ាស៊ីនមេដែលនឹងដំណើរការទិន្នន័យ។ ចូរយើងស្រមៃថាទាំងនេះគឺជាអត្ថបទ។ យើងនឹងកត់ត្រាទិន្នន័យដែលបានបញ្ជូននៅក្នុងមូលដ្ឋានទិន្នន័យដែលមានលេខសម្គាល់តែមួយគត់។ បន្ទាប់មក យើងនឹងបង្កើតថតឯកសារមួយនៅក្នុងថត "រូបភាព" ដែលមានលេខតែមួយគត់ "id" ហើយប្រសិនបើយើងមានឯកសារណាមួយនៅក្នុងថត "tmp" យើងនឹងចម្លងវាទៅថត "id" ដែលបានបង្កើត ហើយបន្ទាប់មកសម្អាត "tmp" ។ "ថតឯកសារ។ ដើម្បីសង្ខេប៖ យើងបំពេញរូបភាពទៅក្នុង tmp ជាផ្ទៃខាងក្រោយ នៅពេលបញ្ជូនទម្រង់ដែលយើងសរសេរទិន្នន័យទៅមូលដ្ឋានទិន្នន័យ យើងនឹងមាន ចំនួនតែមួយគត់កំណត់ត្រា។ យើងបង្កើតថតឯកសារដែលមានលេខនេះ ហើយផ្លាស់ទីឯកសាររបស់យើងនៅទីនោះ។ ទាំងអស់។ នៅក្នុងអត្ថបទនេះ យើងនឹងមិនពិចារណាលើការអាប់ឡូតទៅកាន់មូលដ្ឋានទិន្នន័យ និងការចម្លងឯកសារនោះទេ។ ខ្ញុំគិតថានឹងមានអ្វីមួយសម្រាប់អ្នករាល់គ្នានៅទីនេះ។ យើងនឹងផ្តោតលើរឿងមួយ - ការផ្ទុកអសមកាលរូបភាព (ឬឯកសារ) ។

ដូច្នេះនេះគឺជាបំណែក html របស់យើង។ នៅទីនេះយើងនឹងយកចិត្តទុកដាក់លើការពិតដែលថាយើងមានឯកសារ GIF ដែលមានរូបភាពនៃកម្មវិធីផ្ទុកជាមុន (រង្វង់រង្វិលជុំ) ដែលយើងលាក់ពីការបង្ហាញជាមួយរចនាប័ទ្ម។ យើងក៏នឹងផ្តល់លេខសម្គាល់ = ឯកសារទៅវាលឯកសារ ហើយ enctype = “multipart/form-data” ទៅទម្រង់។ ឈ្មោះវាលឯកសារនឹងជាឯកសារ i.e. ដូច្នេះ​យើង​អាច​ធ្វើ​ការ​ជាមួយ​អារេ ដោយ​សារ​យើង​ត្រូវ​បាន​អនុញ្ញាត​ឱ្យ​ផ្ទុក​ឯកសារ​ច្រើន (គុណលក្ខណៈ​ច្រើន)។

#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 script របស់យើងដែលនឹងផ្ទុកឯកសាររបស់យើងទៅម៉ាស៊ីនមេក្នុងផ្ទៃខាងក្រោយ។ វេទមន្តទាំងអស់នឹងត្រូវបានធ្វើដោយអរគុណចំពោះវត្ថុ FormData() ។ យើងនឹងបន្ថែមកូដនេះទៅចុងបញ្ចប់នៃ index.php របស់យើងមុនស្លាក។

$(document).ready(function())($("#preloader").hide(); $("#file").bind("change", function())(var data = new FormData() var error = ""; jQuery.each($("#file").ឯកសារ, មុខងារ(i, ឯកសារ) (ប្រសិនបើ(file.name.length< 1) { error = error + " Файл имеет неправильный размер! "; } //Проверка на длину имени if(file.size >1000000) ( error = error + " File " + file.name + " is to big."; ) // ពិនិត្យទំហំឯកសារ if(file.type != "image/png" && file.type != "image/jpg " " && !file.type != "image/gif" && file.type != "image/jpeg") ( error = error + "File" + file.name + " មិនត្រូវគ្នានឹង png, jpg ឬ gif" ;) // ពិនិត្យប្រភេទឯកសារ data.append("file-"+i, file);

)); if (error != "") ($("#info").html(error);) else ($.ajax(( url: "upload.php", data: data, cache: false, contentType: false, processData៖ មិនពិត វាយបញ្ចូល៖ "POST", beforeSend: function()( $("#preloader").show(); ), success: function(data)( $("#info").html(data); $("#preloader").hide(); ));
មែនហើយ វាហាក់ដូចជាទាំងអស់។ បើ​អ្នក​ណា​មិន​យល់​អ្វី​មួយ​សួរ។ បើមានអ្នកណាបន្ថែមខ្ញុំក៏សប្បាយចិត្តដែរ!

គន្លឹះ៖ ប្រសិនបើអ្នកមិនទាន់បានប្រើកូដដើម្បីលុបឯកសារចេញពីថតណាមួយទេនោះ ខ្ញុំសូមណែនាំឱ្យផ្លាស់ប្តូរមុខងារលុប rmdir ទៅជាអេកូសម្រាប់ការធ្វើតេស្ត ដើម្បីប្រាកដថាមានតែឯកសារដែលអ្នកចង់លុបប៉ុណ្ណោះនឹងត្រូវបានលុប។ ឧបករណ៍ផ្ទុក Gif ជាមុនអាចត្រូវបានយកឧទាហរណ៍ពីមេរៀនរបស់ខ្ញុំ របៀបបង្កើតចលនា Gif ។ ឧទាហរណ៍នៅចុងបញ្ចប់នៃអត្ថបទ។

UPD៖ ប្រសិនបើអ្នកណាម្នាក់ចង់បន្ថែមភាពស្រស់ស្អាត ឧទាហរណ៍របារវឌ្ឍនភាព នោះយើងនឹងត្រូវការបន្ថែមកូដពីរបីជួរ។ INយើងនឹងបន្ថែមធាតុទំនើបពី html5 - ដំណើរការ ហើយនៅក្នុងកូដ js យើងនឹងបន្ថែមបន្ទាត់ជាច្រើនជាមួយនឹងវត្ថុ XMLHttpRequest ។
ដូច្នេះហើយ html របស់យើងនឹងត្រូវបានបំពេញបន្ថែមដូចខាងក្រោម៖

ហើយយើងនឹងបន្ថែមទៅកូដ js៖

ដំណើរការមុខងារHandlingFunction(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;

លទ្ធផលចុងក្រោយនៃកូដ js៖

$(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) ( error = error + " File " + file.name + " is to big."; ) if(file.type != "image/png" && file.type != "image/jpg" && !file. type != "image/gif" && file.type != "image/jpeg") ( error = error + "File " + file.name + " មិនផ្គូផ្គង png, jpg ឬ gif" ) data.append( "ឯកសារ -"+i, ឯកសារ);