ជំរាបសួរអ្នកទាំងអស់គ្នា! នៅក្នុងអត្ថបទនេះ ខ្ញុំចង់និយាយអំពីការពិសោធន៍ជាច្រើនរបស់ខ្ញុំជាមួយ HTML5 ។ ខ្ញុំនឹងចាប់ផ្តើមពីចម្ងាយ។ យើងទាំងអស់គ្នាត្រូវធ្វើការជាទៀងទាត់ជាមួយចំណុចប្រទាក់គេហទំព័រផ្សេងៗ ហើយជារឿយៗមានអារម្មណ៍ថាការងារនេះអាចត្រូវបានរៀបចំកាន់តែមានប្រសិទ្ធភាព។

ប្រហែលជាក្នុងករណីខ្លះ អ្នកអភិវឌ្ឍន៍សេវាកម្មត្រូវស្តីបន្ទោស ប៉ុន្តែជារឿយៗបញ្ហាស្ថិតនៅក្នុងដែនកំណត់ដែលកំណត់ដោយកម្មវិធីរុករក។ ចូរយើងពិចារណាអំពីការបង្ហោះឯកសារទៅម៉ាស៊ីនមេ។ ក្នុងករណីភាគច្រើន អ្នកនឹងត្រូវបានបង្ហាញជាមួយវាលស្តង់ដារដែលមានប៊ូតុងមួយដើម្បីជ្រើសរើសឯកសារពីកុំព្យូទ័ររបស់អ្នក និង/ឬវាលដែលអ្នកអាចបញ្ជាក់ URL នៃឯកសារដែលមានទីតាំងនៅកន្លែងណាមួយនៅលើអ៊ីនធឺណិត។

យើងនឹងមិនប៉ះការទាញយកឯកសារពីកុំព្យូទ័រក្នុងស្រុកសម្រាប់ពេលនេះទេ ខ្ញុំមានគម្រោងបោះផ្សាយប្រកាសដាច់ដោយឡែកអំពីប្រធានបទនេះ តោះមើលការទាញយកពីម៉ាស៊ីនមេពីចម្ងាយ។

បញ្ហាចាប់ផ្តើមពីជំហានដំបូង។ ទោះបីជាអ្នកយល់យ៉ាងច្បាស់ពីកន្លែងដែលត្រូវរកមើល URL ហើយល្អក្នុងការប្រើឧបករណ៍ដូចជា firebug ក៏ដោយ វានឹងនៅតែចំណាយពេលចុចពីរបីដងដើម្បីទទួលបានអាសយដ្ឋានត្រឹមត្រូវ។ វា​នឹង​មាន​ភាព​ងាយស្រួល​ជាង​ក្នុង​ការ​អូស​រូបភាព​ដែល​ចង់​បាន​ពី​បង្អួច​កម្មវិធីរុករក​តាម​អ៊ីនធឺណិត​មួយ​ទៅ​បង្អួច​មួយទៀត។

ខ្ញុំនឹងបង្ហាញឧទាហរណ៍នៃការអនុវត្តចំណុចប្រទាក់បែបនេះនៅក្នុងអត្ថបទនេះ។ ប្រសិនបើអ្នកចង់បាន អ្នកអាចមើលពីរបៀបដែលវាដំណើរការនៅលើទំព័រសាកល្បង ឬ .

ចំណាំ! ឧទាហរណ៍នេះ។ដំណើរការតែនៅក្នុងកម្មវិធីរុករក Google Chrome ប៉ុណ្ណោះ។ តាមទ្រឹស្តី Firefox និង Safari គាំទ្របច្ចេកវិជ្ជាចាំបាច់ទាំងអស់ ប៉ុន្តែខ្ញុំមិនទាន់រកឃើញវានៅឡើយទេ។ ខ្ញុំយករូបភាពជាចម្បងពីវិគីភីឌាជាវត្ថុសម្រាប់អូស។ បញ្ហាជាច្រើនត្រូវបានកត់សម្គាល់ទាក់ទងនឹងតួអក្សរដែលមិនមែនជាឡាតាំងនៅក្នុង URLs នៃរូបភាព ប៉ុន្តែដើម្បីកុំឱ្យផ្ទុកលើសទម្ងន់នៃឧទាហរណ៍ជាមួយនឹងការត្រួតពិនិត្យ និងការបំប្លែង ខ្ញុំបានទុកវាឱ្យនៅដដែល។

គោលការណ៍នៃប្រតិបត្តិការ

ស្តង់ដារ HTML5 ផ្តល់ការគាំទ្រសម្រាប់ការអូស និងទម្លាក់វត្ថុទំព័រ។ ដោយវិធីនេះ ខ្ញុំបានបង្ហាញរួចហើយនូវឧទាហរណ៍នៃការអនុវត្តដ៏សាមញ្ញបំផុតនៃ D&D - Drag & Drop ដោយប្រើ HTML5 ។ ហើយក្រៅពីនេះ មានបណ្ណាល័យ JavaScript មួយចំនួនដែលអនុវត្តការគាំទ្រ D&D ។

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

ក្នុងករណីនេះ យើងអាចបង្កើត "អ្នកទទួល" រូបភាពនៅលើទំព័ររបស់យើង។ វានឹងក្លាយជា div ធម្មតាជាមួយនឹងកម្មវិធីដោះស្រាយព្រឹត្តិការណ៍ធ្លាក់ចុះដែលបានកំណត់។ ប្រសិនបើអ្នកប្រើ "ទម្លាក់" រូបភាពខាងលើ div នេះ អ្នកដោះស្រាយនឹងត្រូវបានហៅ ហើយក្នុងប៉ារ៉ាម៉ែត្រទីមួយ វានឹងទទួលបានវត្ថុដែលមានព័ត៌មានអំពីរូបភាពដែលកំពុងអូស។

ការអនុវត្ត

តោះចាប់ផ្តើមជាមួយទំព័រកម្មវិធីរបស់យើង។

បង្ហោះរូបភាព

វាមានប្លុកពីរ៖ រូបភាព - នៅទីនេះយើងនឹងបង្ហាញរូបភាពដែលបានទាញយក និង img_target - អ្នកត្រូវអូសរូបភាពនៅលើប្លុកនេះ។ នៅផ្នែកខាងក្រោមនៃទំព័រ យើងភ្ជាប់បណ្ណាល័យ jQuery និងស្គ្រីប main.js ដែលនឹងបញ្ជូនព័ត៌មានអំពីរូបភាពដែលបានអូសទៅម៉ាស៊ីនមេ។

តោះមើល main.js
$(មុខងារ()(
$("#img_target")
.bind("dragenter", មុខងារ(ព្រឹត្តិការណ៍)(
$(this).addClass("drop_here");
ត្រឡប់មិនពិត;
})
.bind("dragleave", មុខងារ(ព្រឹត្តិការណ៍) (

ត្រឡប់មិនពិត;
})
.bind("dragover", មុខងារ(ព្រឹត្តិការណ៍)(
ត្រឡប់មិនពិត;
})
.bind("ទម្លាក់", មុខងារ(ព្រឹត្តិការណ៍)(
$(this).removeClass("drop_here");
var srcRegex = /src=\"([^\s]+)\"/ig;
var data = event.originalEvent.dataTransfer.getData("text/html");
var img_data = srcRegex.exec(ទិន្នន័យ);
$.post("upload.php", ("file_url":img_data), មុខងារ(res) (
var response = eval("(" + res + ")");
$("#images").append($(""));
});
ត្រឡប់ពិត;
});
});
នៅទីនេះយើងកំណត់អ្នកដោះស្រាយទៅព្រឹត្តិការណ៍ dragenter, dragleave និង dragover ។ ពួកវាទាំងអស់គួរតែគ្រាន់តែត្រឡប់មិនពិត ហើយដើម្បីជូនដំណឹងដល់អ្នកប្រើប្រាស់ថារូបភាពអាចត្រូវបាន "ទម្លាក់" នៅក្នុងកម្មវិធីគ្រប់គ្រងការអូសទាញ យើងកំណត់ថ្នាក់ CSS drop_here សម្រាប់ប្លុកអ្នកទទួល។ ការងារភាគច្រើនត្រូវបានធ្វើនៅក្នុងកម្មវិធីគ្រប់គ្រងព្រឹត្តិការណ៍ធ្លាក់ចុះ។ នៅពេលដែលព្រឹត្តិការណ៍នេះកើតឡើង យើងអានព័ត៌មានអំពីវត្ថុ "កំណត់ឡើងវិញ" និង "កាត់" តម្លៃនៃគុណលក្ខណៈ src, i.e. URL នៃរូបភាព។ ព័ត៌មានត្រូវបានផ្ទេរនៅក្នុងវត្ថុ event.originalEvent.dataTransfer ។

បន្ទាប់មកយើងបង្កើតសំណើ AJAX ធម្មតា ហើយហុច URL ដែលបានរកឃើញជាប៉ារ៉ាម៉ែត្រ។ ស្គ្រីបម៉ាស៊ីនមេ (upload.php) នឹងទទួលបាន URL នៃរូបភាពនៅលើម៉ាស៊ីនមេពីចម្ងាយ ហើយបង្ហោះវា។ ហើយដើម្បីឆ្លើយតបទៅនឹងសំណើ AJAX វានឹងផ្ញើ URL ថ្មីនៃរូបភាពដែលបានផ្ទុក។ នៅក្នុងវេន អ្នកដោះស្រាយសំណើ AJAX នឹងបង្កើតស្លាក img ហើយបញ្ចូលវាទៅក្នុងប្លុករូបភាព។ ដូច្នេះ រូបភាពដែលបានទាញយកនឹងបង្ហាញនៅខាងលើកន្លែងទាញយក។

ពិចារណា upload.php

គោលការណ៍ប្រតិបត្តិការមានដូចខាងក្រោម។ យើងអាន URL នៃរូបភាព ហើយព្យាយាមទាញយកវា។ ប្រសិនបើរូបភាពត្រូវបានផ្ទុកឡើង សូមរក្សាទុកវាទៅក្នុងថតឯកសារផ្ទុកឡើង។ ការទទួលរូបភាពពីម៉ាស៊ីនមេពីចម្ងាយត្រូវបានអនុវត្តដោយប្រើមុខងារ fread ។ ឯកសារត្រូវបានអានក្នុងប្លុក 1kB ។ វិធីសាស្រ្តនេះអនុញ្ញាតឱ្យអ្នករំខានការទាញយកឯកសារ ប្រសិនបើទំហំរបស់វាលើសពីដែនកំណត់ដែលបានបញ្ជាក់ (in ក្នុងករណី​នេះ៣០០ គីឡូបៃ) ។

បន្ទាប់ពីទាញយកឯកសាររួច យើងបង្កើត URL សម្រាប់វា ហើយផ្ញើវាទៅកម្មវិធីរុករកតាមអ៊ីនធឺណិតក្នុងទម្រង់ JSON ។ ដូចដែលអ្នកអាចឃើញការអនុវត្តកម្មវិធីចាប់ផ្ដើមប្រព័ន្ធបែបនេះមិនពិបាកទេ។ ហើយវាងាយស្រួលប្រើណាស់។ ជាធម្មតា គុណវិបត្តិចម្បងគឺការគាំទ្រ HTML5 ដោយកម្មវិធីរុករកតាមអ៊ីនធឺណិត ឬផ្ទុយទៅវិញការខ្វះខាតរបស់វា។ ទោះជាយ៉ាងណាក៏ដោយ ប្រសិនបើអ្នកកំពុងបង្កើតចំណុចប្រទាក់សម្រាប់បុគ្គលិករបស់ក្រុមហ៊ុន ហើយអ្នកអាចបញ្ជាក់ប្រភេទនៃកម្មវិធីរុករកនោះ HTML5 អាចត្រូវបានប្រើ។

យើងបន្តបង្កើតការទាញ និងទម្លាក់របស់យើង ហើយថ្ងៃនេះយើងនឹងសរសេរ server របស់យើង ហើយចាប់ផ្តើមសរសេរកូដ JavaScript។

នៅក្នុងអត្ថបទចុងក្រោយយើងបានសរសេរឯកសារ index.html និងរចនាប័ទ្មសម្រាប់វា។ ថ្ងៃនេះយើងនឹងសរសេរ Server ដែលនឹងទាញយកឯកសារ និងបញ្ជូនព័ត៌មានអំពីពួកវាត្រឡប់ទៅស្គ្រីបវិញ ប៉ុន្តែដំបូងសូមនិយាយអំពីរចនាសម្ព័ន្ធឯកសារដែលយើងនឹងមាន៖

• .htaccess
• index.html
• style.css
• upload.php
• ផ្ទុកឡើង

អ្វីគ្រប់យ៉ាងគឺច្បាស់ជាមួយនឹងឯកសារ index.html និង style.css ។ យើងគ្រាន់តែកំណត់ការអ៊ិនកូដនៅក្នុងឯកសារ .htaccess ដើម្បីកុំឱ្យមានបញ្ហា។

AddDefaultCharset UTF-8

ឯកសារ upload.php នឹងផ្ទុកឯកសារទៅម៉ាស៊ីនមេនៅក្នុងថតឯកសារផ្ទុកឡើង។

ដូច្នេះសូមចាប់ផ្តើមជាមួយ php ។ ដើម្បីធ្វើដូចនេះបើកឯកសារ upload.php ហើយសរសេរដូចខាងក្រោមៈ

នៅដើមនៃឯកសារ យើងសរសេរបឋមកថា Content-Type ដើម្បីប្រាប់ browser ថាវានឹងទទួលបាន json ។ បន្ទាប់មកយើងបង្កើតអារេ $uploaded ទទេមួយ ហើយពិនិត្យមើលថាតើមានឯកសារអ្វីទាំងអស់។ ប្រសិនបើបាទ/ចាស នោះយើងឆ្លងកាត់ពួកវា ហើយបង្ហោះពួកវាទៅក្នុងបញ្ជីផ្ទុកឡើងរបស់យើង ហើយថែមទាំងបំពេញអារេដែលផ្ទុកឡើង $ មេរបស់យើងជាមួយនឹងអារេរងដែលនឹងមានព័ត៌មានអំពីឯកសារ។ ក្នុងករណីរបស់យើងនេះគឺជាឈ្មោះឯកសារនិងទីតាំងរបស់វា។ ជាចុងក្រោយ យើងបំប្លែងអារេរបស់យើងទៅជា json ហើយបញ្ចេញវា។ ដូចដែលអ្នកអាចឃើញម៉ាស៊ីនមេមិនស្មុគស្មាញទាល់តែសោះ។

ឥឡូវ​យើង​បន្ត​ទៅ​ឯកសារ index.html

អូសឯកសារនៅទីនេះ

(មុខងារ () (
var dropzone = document.getElementById("dropzone");
dropzone.ondragover = មុខងារ()(
this.className = "dropzone dragover";
this.innerHTML = "លែងកណ្តុរ";
ត្រឡប់មិនពិត;
};

Dropzone.ondragleave = មុខងារ()(


ត្រឡប់មិនពិត;
};

Dropzone.ondrop = មុខងារ(e)(
this.className = "dropzone";
this.innerHTML = "អូសឯកសារនៅទីនេះ";
e.preventDefault();
};
})();

ចងចាំថ្នាក់ .dragover ដែលយើងបានសរសេរនៅក្នុងអត្ថបទចុងក្រោយ ហើយខ្ញុំបាននិយាយថាវានឹងត្រូវបានប្រើនៅពេលដែលមានឯកសារមួយចំនួននៅពីលើប្លុករបស់យើង? នេះជាការពិត អ្វីដែលយើងបានធ្វើនៅពេលនេះ។ នៅពេលដែលឯកសារមួយចំនួនលេចឡើងនៅខាងលើប្លុក ព្រឹត្តិការណ៍ ondragover ត្រូវបានបណ្តេញចេញ ដែលយើងគ្រាន់តែបន្ថែមថ្នាក់ .dragover របស់យើង ហើយប្តូរអត្ថបទទៅជា "លែងកណ្តុរ". នៅពេលយើងផ្លាស់ទីកណ្ដុរជាមួយឯកសារឱ្យឆ្ងាយពីប្លុករបស់យើង ព្រឹត្តិការណ៍ ondragleave ត្រូវបានកេះ ដែលយើងត្រឡប់អ្វីៗគ្រប់យ៉ាងទៅទីតាំងដើមរបស់វា។ នៅពេលដែលមនុស្សម្នាក់ "ទម្លាក់" ឯកសារទៅក្នុងប្លុករបស់យើង ព្រឹត្តិការណ៍ ondrop ត្រូវបានបង្កឡើង។ នៅទីនោះ យើងផ្លាស់ប្តូរអ្វីៗគ្រប់យ៉ាងម្តងទៀត ដូចដែលវានៅដើមដំបូង បើមិនដូច្នេះទេ ថ្នាក់ .dragover របស់យើងនឹង "បង្កក" និងលុបចោលឥរិយាបថលំនាំដើម។ ប្រសិនបើយើងមិនធ្វើបែបនេះទេ ឯកសាររបស់យើងនឹងបើកជាធម្មតានៅក្នុង browser ដែលមិនមែនជាអ្វីដែលយើងចង់បាន។

ប្រហែលជាក្នុងករណីខ្លះ អ្នកអភិវឌ្ឍន៍សេវាកម្មត្រូវស្តីបន្ទោស ប៉ុន្តែជារឿយៗបញ្ហាស្ថិតនៅក្នុងដែនកំណត់ដែលកំណត់ដោយកម្មវិធីរុករក។ ចូរយើងពិចារណាអំពីការបង្ហោះឯកសារទៅម៉ាស៊ីនមេ។

ក្នុងករណីភាគច្រើន អ្នកនឹងត្រូវបានបង្ហាញជាមួយវាលស្តង់ដារដែលមានប៊ូតុងមួយដើម្បីជ្រើសរើសឯកសារពីកុំព្យូទ័ររបស់អ្នក និង/ឬវាលដែលអ្នកអាចបញ្ជាក់ URL នៃឯកសារដែលមានទីតាំងនៅកន្លែងណាមួយនៅលើអ៊ីនធឺណិត។

យើងនឹងមិនប៉ះការទាញយកឯកសារពីកុំព្យូទ័រក្នុងស្រុកសម្រាប់ពេលនេះទេ ខ្ញុំមានគម្រោងបោះផ្សាយប្រកាសដាច់ដោយឡែកអំពីប្រធានបទនេះ តោះមើលការទាញយកពីម៉ាស៊ីនមេពីចម្ងាយ។

បញ្ហាចាប់ផ្តើមពីជំហានដំបូង។ ទោះបីជាអ្នកយល់យ៉ាងច្បាស់ពីកន្លែងដែលត្រូវរកមើល URL ហើយល្អក្នុងការប្រើឧបករណ៍ដូចជា firebug ក៏ដោយ វានឹងនៅតែចំណាយពេលចុចពីរបីដងដើម្បីទទួលបានអាសយដ្ឋានត្រឹមត្រូវ។ វា​នឹង​មាន​ភាព​ងាយស្រួល​ជាង​ក្នុង​ការ​អូស​រូបភាព​ដែល​ចង់​បាន​ពី​បង្អួច​កម្មវិធីរុករក​តាម​អ៊ីនធឺណិត​មួយ​ទៅ​បង្អួច​មួយទៀត។

ខ្ញុំនឹងបង្ហាញការអនុវត្តនៃចំណុចប្រទាក់បែបនេះនៅក្នុងអត្ថបទនេះ។ ប្រសិនបើអ្នកចង់បាន អ្នកអាចមើលពីរបៀបដែលវាដំណើរការនៅលើទំព័រសាកល្បង ឬទាញយកប័ណ្ណសារជាមួយប្រភព។

ចំណាំ! ឧទាហរណ៍នេះដំណើរការតែនៅក្នុងកម្មវិធីរុករក Google Chrome ប៉ុណ្ណោះ។ តាមទ្រឹស្តី Firefox និង Safari គាំទ្របច្ចេកវិជ្ជាចាំបាច់ទាំងអស់ ប៉ុន្តែខ្ញុំមិនទាន់រកឃើញវានៅឡើយទេ។

ជាវត្ថុសម្រាប់អូស ខ្ញុំបានយករូបភាពជាចម្បងពីវិគីភីឌា។ បញ្ហាជាច្រើនត្រូវបានកត់សម្គាល់ទាក់ទងនឹងតួអក្សរដែលមិនមែនជាឡាតាំងនៅក្នុង URLs នៃរូបភាព ប៉ុន្តែដើម្បីកុំឱ្យផ្ទុកលើសទម្ងន់នៃឧទាហរណ៍ជាមួយនឹងការត្រួតពិនិត្យ និងការបំប្លែង ខ្ញុំបានទុកវាឱ្យនៅដដែល។

គោលការណ៍នៃប្រតិបត្តិការ

ស្តង់ដារ HTML5 ផ្តល់ការគាំទ្រសម្រាប់ការអូស និងទម្លាក់វត្ថុទំព័រ។ ដោយវិធីនេះ ខ្ញុំបានបង្ហាញរួចហើយនូវឧទាហរណ៍នៃការអនុវត្តដ៏សាមញ្ញបំផុតនៃ D&D - Drag & Drop ដោយប្រើ HTML5 ។ ហើយក្រៅពីនេះ មានបណ្ណាល័យ JavaScript មួយចំនួនដែលអនុវត្តការគាំទ្រ D&D ។

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

ក្នុងករណីនេះ យើងអាចបង្កើត "អ្នកទទួល" រូបភាពនៅលើទំព័ររបស់យើង។ វានឹងក្លាយជា div ធម្មតាជាមួយនឹងកម្មវិធីដោះស្រាយព្រឹត្តិការណ៍ធ្លាក់ចុះដែលបានកំណត់។ ប្រសិនបើអ្នកប្រើ "ទម្លាក់" រូបភាពខាងលើ div នេះ អ្នកដោះស្រាយនឹងត្រូវបានហៅ ហើយក្នុងប៉ារ៉ាម៉ែត្រទីមួយ វានឹងទទួលបានវត្ថុដែលមានព័ត៌មានអំពីរូបភាពដែលកំពុងអូស។

ការអនុវត្ត

តោះចាប់ផ្តើមជាមួយទំព័រកម្មវិធីរបស់យើង។

បង្ហោះរូបភាព

វាមានប្លុកពីរ៖ រូបភាព - នៅទីនេះយើងនឹងបង្ហាញរូបភាពដែលបានផ្ទុក និង img_target - អ្នកត្រូវអូសរូបភាពនៅលើប្លុកនេះ។

នៅផ្នែកខាងក្រោមនៃទំព័រ យើងភ្ជាប់បណ្ណាល័យ jQuery និងស្គ្រីប main.js ដែលនឹងបញ្ជូនព័ត៌មានអំពីរូបភាពដែលបានអូសទៅម៉ាស៊ីនមេ។

តោះមើល main.js

$(មុខងារ()(
$("#img_target")
.bind("dragenter", មុខងារ(ព្រឹត្តិការណ៍)(
$(this).addClass("drop_here");
ត្រឡប់មិនពិត;
})
.bind("dragleave", មុខងារ(ព្រឹត្តិការណ៍) (
ត្រឡប់មិនពិត;
})
.bind("dragover", មុខងារ(ព្រឹត្តិការណ៍)(
ត្រឡប់មិនពិត;
})
.bind("ទម្លាក់", មុខងារ(ព្រឹត្តិការណ៍)(
$(this).removeClass("drop_here");
var srcRegex = /src=\"([^\s]+)\"/ig;
var data = event.originalEvent.dataTransfer.getData("text/html");
var img_data = srcRegex.exec(ទិន្នន័យ);
$.post("upload.php", ("file_url":img_data), មុខងារ(res) (
var response = eval("(" + res + ")");
$("#images").append($(" "));
});
ត្រឡប់ពិត;
});

នៅទីនេះយើងកំណត់អ្នកដោះស្រាយទៅព្រឹត្តិការណ៍ dragenter, dragleave និង dragover ។ ពួកវាទាំងអស់គួរតែគ្រាន់តែត្រឡប់មិនពិត ហើយដើម្បីជូនដំណឹងដល់អ្នកប្រើប្រាស់ថារូបភាពអាចត្រូវបាន "ទម្លាក់" នៅក្នុងកម្មវិធីគ្រប់គ្រងការអូសទាញ យើងកំណត់ថ្នាក់ CSS drop_here សម្រាប់ប្លុកអ្នកទទួល។

ការងារភាគច្រើនត្រូវបានធ្វើនៅក្នុងកម្មវិធីគ្រប់គ្រងព្រឹត្តិការណ៍ធ្លាក់ចុះ។ នៅពេលដែលព្រឹត្តិការណ៍នេះកើតឡើង យើងអានព័ត៌មានអំពីវត្ថុ "កំណត់ឡើងវិញ" និង "កាត់" តម្លៃនៃគុណលក្ខណៈ src, i.e. URL នៃរូបភាព (បន្ទាត់ 16-18) ។ ព័ត៌មានត្រូវបានផ្ទេរក្នុង event.originalEvent.dataTransfer object (បន្ទាត់ 17)។

បន្ទាប់មកយើងបង្កើតសំណើ AJAX ធម្មតា ហើយហុច URL ដែលបានរកឃើញជាប៉ារ៉ាម៉ែត្រ។

ស្គ្រីបម៉ាស៊ីនមេ (upload.php) នឹងទទួលបាន URL នៃរូបភាពនៅលើម៉ាស៊ីនមេពីចម្ងាយ ហើយបង្ហោះវា។ ហើយដើម្បីឆ្លើយតបទៅនឹងសំណើ AJAX វានឹងផ្ញើ URL ថ្មីនៃរូបភាពដែលបានផ្ទុក។

នៅក្នុងវេន អ្នកដោះស្រាយសំណើ AJAX នឹងបង្កើតស្លាក img ហើយបញ្ចូលវាទៅក្នុងប្លុករូបភាព។ ដូច្នេះ រូបភាពដែលបានទាញយកនឹងបង្ហាញនៅខាងលើកន្លែងទាញយក។

ពិចារណា upload.php

កំណត់("BASE_URL", "http://localhost/tests/images-upload/");

មុខងារ upload_from_url($file_url) (
$url_segments = ផ្ទុះ("/", $file_url);
$file_name = urldecode(end($url_segments));
ប្រសិនបើ (មិនពិត !== $file_name) (
$file_name_parts = explode(".", $file_name);
ប្រសិនបើ (in_array(strtolower(end($file_name_parts)), array("jpeg","jpg","png","gif"))) (
$destination=fopen("upload/".$file_name,"w");
$source=fopen($file_url,"r");
$maxsize=300*1024;
$length=0;
while (($a=fread($source,1024))&&($length "URL ឯកសារមិនបានបញ្ជាក់");

ប្រសិនបើ (isset($_POST["file_url"])) (
$new_url = upload_from_url($_POST["file_url"]);
$res = អារេ("file_url" => $new_url);
}

អេកូ json_encode($res);

គោលការណ៍ប្រតិបត្តិការមានដូចខាងក្រោម។ យើងអាន URL នៃរូបភាព ហើយព្យាយាមទាញយកវា (បន្ទាត់ 29-32) ។

ប្រសិនបើរូបភាពត្រូវបានផ្ទុកឡើង សូមរក្សាទុកវាទៅក្នុងថតឯកសារផ្ទុកឡើង។ ការទទួលរូបភាពពីម៉ាស៊ីនមេពីចម្ងាយត្រូវបានអនុវត្តដោយប្រើមុខងារ fread ។ ឯកសារត្រូវបានអានក្នុងប្លុក 1kB (បន្ទាត់ 15-18) ។ វិធីសាស្រ្តនេះអនុញ្ញាតឱ្យអ្នករំខានការទាញយកឯកសារប្រសិនបើទំហំរបស់វាលើសពីដែនកំណត់ដែលបានបញ្ជាក់ (ក្នុងករណីនេះ 300kB) ។

បន្ទាប់ពីទាញយកឯកសាររួច យើងបង្កើត URL សម្រាប់វា ហើយផ្ញើវាទៅកម្មវិធីរុករកតាមអ៊ីនធឺណិតក្នុងទម្រង់ JSON ។

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

ទោះយ៉ាងណាក៏ដោយ ប្រសិនបើអ្នកកំពុងបង្កើតចំណុចប្រទាក់សម្រាប់បុគ្គលិករបស់ក្រុមហ៊ុន ហើយអ្នកអាចបញ្ជាក់ប្រភេទនៃកម្មវិធីរុករកនោះ HTML5 អាចត្រូវបានប្រើ។

ហើយនៅក្នុងមេរៀននេះ ខ្ញុំនឹងបង្ហាញអ្នកនូវឧទាហរណ៍នៃការរួមបញ្ចូលកម្មវិធីជំនួយ Dropzone.js ដ៏អស្ចារ្យជាមួយនឹងគេហទំព័រ PHP របស់អ្នកដើម្បីផ្ទុកឯកសារទៅម៉ាស៊ីនមេដោយគ្រាន់តែពីរបីជួរនៃកូដ។

Dropzone.JS គឺជាបណ្ណាល័យប្រភពបើកចំហដ៏អស្ចារ្យដែលសរសេរនៅក្នុង vanilla JS ដែលផ្តល់ឱ្យអ្នកនូវចំណុចប្រទាក់អូសនិងទម្លាក់សម្រាប់ការផ្ទុកឡើងឯកសារជាមួយនឹងការមើលឯកសារជាមុន។

ជាដំបូង ទាញយកកំណែចុងក្រោយបំផុតនៃបណ្ណាល័យ និងរចនាប័ទ្មរបស់វា៖

បន្ទាប់មកបង្កើតឯកសារផ្ទុកឡើង និងឯកសារ index.php និង upload.php

ឯកសារ php លិបិក្រមអាចជាផ្នែកនៃកូដរបស់អ្នកដែលមានទម្រង់សម្រាប់បន្ថែមសម្ភារៈទៅគេហទំព័រ។ ក្នុងឧទាហរណ៍របស់ខ្ញុំ ខ្ញុំនឹងបង្កើតទំព័រទទេដែលមានការសម្គាល់តិចតួច និងបណ្ណាល័យ និងរចនាប័ទ្ម Dropzone.js រួមបញ្ចូល៖

ដូចដែលអ្នកប្រហែលជាបានកត់សម្គាល់ យើងបានបង្កើតទម្រង់មួយជាមួយនឹងសកម្មភាព upload.php ប៉ុន្តែមិនបានបង្កើតធាតុបញ្ចូលណាមួយសម្រាប់ការភ្ជាប់ឯកសារ និងមិនបានប្រកាសអំពី enctype នៃទម្រង់នោះទេ។ មិនមានកំហុសក្នុងរឿងនេះទេ អ្វីគ្រប់យ៉ាងត្រូវបានគ្រប់គ្រងដោយបណ្ណាល័យ DropzoneJS ខ្លួនឯង។ អ្វីទាំងអស់ដែលយើងត្រូវធ្វើគឺផ្តល់ឱ្យទម្រង់ dropzone class ។ តាមលំនាំដើម DropzoneJS ស្វែងរកទម្រង់ទាំងអស់ជាមួយនឹងថ្នាក់នេះ ហើយគូរចំណុចប្រទាក់របស់វាដោយស្វ័យប្រវត្តិ។

អ្នកអាចបើកទំព័រ index.php សម្រាប់ប្រតិបត្តិក្នុងកម្មវិធីរុករក ហើយត្រូវប្រាកដថាបណ្ណាល័យដំណើរការដូចបំណង។ នេះជាអ្វីដែលខ្ញុំទទួលបាន៖

ឥឡូវនេះ ចូរយើងបង្កើតកម្មវិធីដោះស្រាយការអាប់ឡូត ដែលយើងបានបង្កើតឯកសារ upload.php រួចហើយ។ នេះគឺជាឧទាហរណ៍នៃកូដផ្ទុកដ៏សាមញ្ញបំផុតរបស់ខ្ញុំ៖

ធ្វើការជាមួយឯកសារដែលបានទាញយក

ដើម្បី​ធ្វើ​អន្តរកម្ម​យ៉ាង​ពេញលេញ​ជាមួយ​ឯកសារ​របស់​អ្នក យើង​គ្រាន់​តែ​ត្រូវ​បន្ថែម​សមត្ថភាព​ក្នុង​ការ​រៀបចំ​ពួកវា។ ដំបូង យើង​ត្រូវ​បន្ថែម​លេខ​កូដ​មួយ​ដើម្បី​ស្រង់​ព័ត៌មាន​អំពី​ឯកសារ​ដែល​បាន​រក្សា​ទុក (ឈ្មោះ និង​ទំហំ) ហើយ​ត្រឡប់​វា​ជា​ទម្រង់ JSON ។

ដើម្បីធ្វើដូច្នេះ ធ្វើបច្ចុប្បន្នភាពឯកសារ upload.php ទៅទម្រង់នេះ (លក្ខខណ្ឌផ្សេងទៀតត្រូវបានបញ្ចូល)៖

មុខងារ PHP scandir ស្កេនថតឯកសារផ្ទុកឡើង ហើយត្រឡប់អារេនៃឯកសារ ឬ FALSE ប្រសិនបើថតទទេ។

យើងរង្វិលជុំតាមរយៈតម្លៃត្រឡប់ពីមុខងារ scandir ហើយរក្សាទុកវាទៅក្នុងអារេ $result ។ សូមចាំថាយើងមិនអើពើ "" ។ ហើយ ".." ចាប់តាំងពី scandir នឹងតែងតែត្រឡប់មកវិញ "." និង ".." ជាខ្លឹមសារត្រឹមត្រូវដែលទាក់ទងនឹងថតបច្ចុប្បន្ន និងពីមុន។

យើងបញ្ចេញបឋមកថាត្រឹមត្រូវសម្រាប់ការសម្គាល់ JSON ហើយក៏បំប្លែងអារេ PHP ទៅជាខ្សែអក្សរ JSON ដោយប្រើមុខងារ json_encode ។

ឥឡូវដល់ពេលធ្វើបច្ចុប្បន្នភាព index.php៖

Dropzone.options.myDropzone = ( init: function() ( thisDropzone = this; $.get("upload.php", function(data) ( $.each(data, function(key,value)( var mockFile = ( name : value.name, size: value.size ); thisDropzone.options.addedfile.call(thisDropzone, mockFile); thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "uploads/"+value.name); )); ) ) ) );

តើយើងបានធ្វើអ្វីនៅទីនេះ? ចូរយើងដោះស្រាយវា៖

Alas, យើងបានបន្ថែមបណ្ណាល័យ Jquery ទៅទំព័ររបស់យើង។ នេះមិនមែនជាភាពចាំបាច់សម្រាប់ DropzoneJs ទេ។ យើងកំពុងប្រើមុខងារ JQuery $.get ajax ប៉ុណ្ណោះ។ តាមការសម្រេចចិត្តរបស់អ្នក អ្នកអាចអនុវត្តសំណើស្រដៀងគ្នានៅក្នុង vue.js ឬអ្វីដែលអ្នកចូលចិត្ត។

យើងបានបន្ថែមធាតុ ID (my-dropzone) ទៅក្នុងទម្រង់។ នេះគឺចាំបាច់ដើម្បីផ្ទេរតម្លៃកំណត់រចនាសម្ព័ន្ធទៅ Dropzone ។ ហើយសម្រាប់រឿងនេះ យើងត្រូវតែមានឧបករណ៍សម្គាល់តែមួយគត់ដែលចង្អុលទៅវា។ វិធីនេះយើងអាចកំណត់រចនាសម្ព័ន្ធបណ្ណាល័យដោយកំណត់តម្លៃទៅ Dropzone.options.myDropzone ។

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

យើងទទួលបានអារេនៃឯកសារពី "upload.php" ដោយប្រើ ajax ។

បង្កើត mockFile ដោយប្រើតម្លៃពីម៉ាស៊ីនមេ។ MockFiles គឺគ្រាន់តែជាវត្ថុ JavaScript ដែលមានលក្ខណៈសម្បត្តិឈ្មោះ និងទំហំ។ បន្ទាប់មកយើងហៅមុខងារ Dropbox យ៉ាងច្បាស់ ហើយបន្ថែមរូបតំណាងដើម្បីនាំយកឯកសារដែលមានស្រាប់ចូលទៅក្នុងតំបន់ផ្ទុកឡើងរបស់ Dropzone និងបង្កើតរូបភាពតូចៗរបស់វា។

ប្រសិនបើអ្នកបានធ្វើអ្វីគ្រប់យ៉ាងត្រឹមត្រូវ។ បង្ហោះរូបភាពមួយចំនួន ហើយផ្ទុកទំព័រទម្រង់ឡើងវិញ។ ឯកសារដែលបានផ្ទុកឡើងពីមុនគួរតែបង្ហាញដោយស្វ័យប្រវត្តិនៅក្នុងតំបន់ Dropzone ។

អរគុណចំពោះការច្នៃប្រឌិតរបស់ HTML5 ការបង្កើតចំណុចប្រទាក់អូស និងទម្លាក់បានកាន់តែងាយស្រួល។ ជាអកុសល ការច្នៃប្រឌិតទាំងនេះមិនទាន់មានការគាំទ្រកម្មវិធីរុករកដ៏ទូលំទូលាយនៅឡើយទេ ប៉ុន្តែខ្ញុំសង្ឃឹមថាវានឹងផ្លាស់ប្តូរក្នុងពេលឆាប់ៗនេះ (បច្ចុប្បន្នដំណើរការនៅក្នុង Firefox 4+, Chrome និង Opera 11.10)។

Markup ខ្ញុំត្រូវតែនិយាយភ្លាមៗថាអត្ថបទនេះត្រូវបានសរសេរច្រើនជាងសម្រាប់អ្នកចាប់ផ្តើមដំបូងជាងអ្នកជំនាញ។ ដូច្នេះចំណុចមួយចំនួននឹងត្រូវបានពិពណ៌នាយ៉ាងលម្អិត។

ដំបូងយើងត្រូវបង្កើតឯកសារ HTML ដែលមានខ្លឹមសារដូចខាងក្រោម៖

ដើម្បីទាញយក សូមអូសឯកសារនៅទីនេះ។

ការងារទាំងអស់របស់យើងនឹងកើតឡើងជាមួយធុង dropZone ។ ឥឡូវនេះ ចូរយើងបន្ថែមរចនាប័ទ្មសម្រាប់ឯកសាររបស់យើង (style.css)៖

តួ ( font: 12px Arial, sans-serif; ) #dropZone ( color: #555; font-size: 18px; text-align: center; width: 400px; padding: 50px 0; margin: 50px auto; background: #eee ; border: 1px solid #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; ) #dropZone.hover ( background: #ddd; border-color: #aaa; ) #dropZone.error (ផ្ទៃខាងក្រោយ៖ #faa; ពណ៌ព្រំដែន៖ #f00; ) #dropZone.drop (ផ្ទៃខាងក្រោយ៖ #afa; ពណ៌ព្រំដែន៖ #0f0; )

នៅក្នុងរចនាប័ទ្ម អ្នកអាចសម្គាល់ឃើញរដ្ឋចំនួនបីសម្រាប់ធាតុ dropZone៖ នៅលើដាក់លើ ប្រសិនបើកំហុសមួយចំនួនកើតឡើង ហើយនៅពេលជោគជ័យ។

កំពុង​ផ្ទុក​ស្គ្រីប ឥឡូវ​យើង​ឈាន​ដល់​ផ្នែក​ដ៏​សប្បាយ​មួយ​គឺ​ការ​សរសេរ​កូដ JavaScript។ ដើម្បីចាប់ផ្តើម យើងត្រូវបង្កើត variables ដែលនៅក្នុងនោះយើងនឹងដាក់ dropZone របស់យើង ហើយនៅក្នុងទីពីរ យើងនឹងបង្ហាញ ទំហំអតិបរមាឯកសារ។

$(document).ready(function() ( var dropZone = $("#dropZone"), maxFileSize = 1000000; // ទំហំឯកសារអតិបរមា - 1 MB. ));

បន្ទាប់មកយើងត្រូវពិនិត្យមើលថាតើ browser គាំទ្រការអូស និងទម្លាក់ សម្រាប់ការនេះយើងនឹងប្រើមុខងារ FileReader ។ ប្រសិនបើកម្មវិធីរុករកមិនគាំទ្រការអូស និងទម្លាក់ នោះនៅខាងក្នុងធាតុ dropZone យើងនឹងសរសេរថា "មិនត្រូវបានគាំទ្រដោយកម្មវិធីរុករកទេ!" ហើយបន្ថែមថ្នាក់ "កំហុស" ។

ប្រសិនបើ (typeof(window.FileReader) == "មិនបានកំណត់") ( dropZone.text("មិនត្រូវបានគាំទ្រដោយកម្មវិធីរុករកទេ!"); dropZone.addClass("កំហុស"); )

រឿងបន្ទាប់ដែលយើងនឹងធ្វើគឺចលនានៃឥទ្ធិពលនៃការអូសឯកសារទៅ dropZone ។ យើងនឹងតាមដានសកម្មភាពទាំងនេះដោយប្រើព្រឹត្តិការណ៍ "ondragover" និង "ondragleave" ។ ប៉ុន្តែដោយសារព្រឹត្តិការណ៍ទាំងនេះមិនអាចតាមដានដោយវត្ថុ jQuery យើងត្រូវចូលប្រើមិនត្រឹមតែ "dropZone" ប៉ុណ្ណោះទេ ប៉ុន្តែ "dropZone" ។

DropZone.ondragover = function() ( dropZone.addClass("hover"); ត្រឡប់មិនពិត; ); dropZone.ondragleave = function() ( dropZone.removeClass("hover"); ត្រឡប់មិនពិត; );

ឥឡូវនេះយើងត្រូវសរសេរកម្មវិធីដោះស្រាយព្រឹត្តិការណ៍សម្រាប់ព្រឹត្តិការណ៍ "ondrop" - នេះគឺជាព្រឹត្តិការណ៍នៅពេលដែលឯកសារដែលបានអូសត្រូវបានទម្លាក់។ នៅក្នុងកម្មវិធីរុករកមួយចំនួន នៅពេលអ្នកអូសឯកសារចូលទៅក្នុងបង្អួចកម្មវិធីរុករក ពួកវាបើកដោយស្វ័យប្រវត្តិ ដូច្នេះវាមិនកើតឡើង យើងត្រូវលុបចោលឥរិយាបថស្តង់ដាររបស់កម្មវិធីរុករកតាមអ៊ីនធឺណិត។ យើងក៏ត្រូវដកថ្នាក់ "ដាក់" ហើយបន្ថែមថ្នាក់ "ទម្លាក់" ។

DropZone.ondrop = function(event) ( event.preventDefault(); dropZone.removeClass("hover"); dropZone.addClass("drop"); );

ឯកសារ var = event.dataTransfer.files; ប្រសិនបើ (file.size > maxFileSize) ( dropZone.text("ឯកសារធំពេក!"); dropZone.addClass("error"); ត្រឡប់មិនពិត; )

ឥឡូវនេះយើងត្រូវសរសេរសំណើ AJAX ដែលផ្ញើឯកសាររបស់យើងទៅអ្នកដោះស្រាយ។ សម្រាប់ការបង្កើត សំណើ AJAXយើងនឹងប្រើវត្ថុ XMLHttpRequest ។ តោះបន្ថែមកម្មវិធីដោះស្រាយព្រឹត្តិការណ៍ពីរសម្រាប់វត្ថុ XMLHttpRequest៖ មួយនឹងបង្ហាញពីដំណើរការទាញយកឯកសារ ហើយទីពីរនឹងបង្ហាញលទ្ធផលទាញយក។ យើងនឹងបញ្ជាក់ឯកសារ upload.php ជាអ្នកដោះស្រាយ។

Var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("ដំណើរការ", uploadProgress, មិនពិត); xhr.onreadystatechange = stateChange; xhr.open("POST", "/upload.php"); xhr.setRequestHeader("X-FILE-NAME", file.name); xhr.send(ឯកសារ);

ឥឡូវនេះ សូមក្រឡេកមើលដំណើរការទាញយក និងមុខងារទាញយកលទ្ធផល។ មិនមានអ្វីស្មុគស្មាញអំពីមុខងារ "uploadProgress" ទេ គ្រាន់តែជាគណិតវិទ្យាសាមញ្ញប៉ុណ្ណោះ។

មុខងារ uploadProgress(event) ( var percent = parseInt(event.loaded / event.total * 100); dropZone.text("កំពុងផ្ទុក៖ " + ភាគរយ + "%"); )

នៅក្នុងមុខងារ "stateChange" យើងត្រូវពិនិត្យមើលថាតើដំណើរការផ្ទុកត្រូវបានបញ្ចប់ឬអត់ ហើយប្រសិនបើដូច្នេះ យើងត្រូវពិនិត្យមើលថាតើមានកំហុសណាមួយបានកើតឡើងដែរឬទេ។ លេខកូដស្នើសុំជោគជ័យគឺ "200" ប្រសិនបើលេខកូដខុសពីនេះ វាមានន័យថាមានកំហុសកើតឡើង។

Function stateChange(event) ( if (event.target.readyState == 4) ( if (event.target.status == 200) ( dropZone.text("ការបង្ហោះបានបញ្ចប់ដោយជោគជ័យ!"); ) else (dropZone.text(" កំហុសបានកើតឡើង!"); dropZone.addClass("error"); ) ))

ផ្នែក JavaScript ត្រូវបានបញ្ចប់។

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

នោះហើយជាទាំងអស់ ខ្ញុំសង្ឃឹមថាអត្ថបទមានប្រយោជន៍សម្រាប់អ្នក។

អ្នកអាចទាញយកឯកសារប្រភព