نموذج AJAX جميل لتحميل الملفات. HTML5: تحميل الملفات باستخدام السحب والإفلات وتخصيص النموذج الخاص بنا

ربما يقع اللوم في بعض الحالات على مطوري الخدمة، ولكن غالبًا ما تكمن المشكلة في القيود التي تفرضها المتصفحات. دعونا نفكر في تحميل الملفات إلى الخادم.

في معظم الحالات، سيظهر لك حقل قياسي يحتوي على زر لتحديد ملف من جهاز الكمبيوتر الخاص بك و/أو حقل يمكنك من خلاله تحديد عنوان URL لملف موجود في مكان ما على الويب.

لن نتطرق إلى تنزيل الملفات من جهاز كمبيوتر محلي في الوقت الحالي، وأخطط لنشر منشور منفصل حول هذا الموضوع، فلننظر إلى التنزيل من خادم بعيد.

المشاكل تبدأ من الخطوة الأولى. حتى إذا كنت تفهم بوضوح مكان البحث عن عنوان URL وتجيد استخدام أدوات مثل firebug، فسيظل الأمر يتطلب بضع نقرات للحصول على العنوان الصحيح. سيكون الأمر أكثر ملاءمة لسحب الصورة المطلوبة من نافذة متصفح إلى أخرى.

سأعرض تطبيقات هذه الواجهة في هذه المقالة. إذا أردت، يمكنك رؤية كيفية عمله على الصفحة التجريبية أو تنزيل الأرشيف مع المصادر.

ملحوظة! هذا المثال يعمل فقط في متصفح Google Chrome. من الناحية النظرية، يدعم Firefox وSafari جميع التقنيات الضرورية، لكنني لم أكتشفها بعد.

كأشياء للسحب، قمت بالتقاط صور من ويكيبيديا بشكل أساسي. تمت ملاحظة العديد من المشكلات المتعلقة بالأحرف غير اللاتينية في عناوين URL للصور، ولكن لكي لا أثقل كاهل المثال بعمليات التحقق والتحويلات، تركتها كما هي.


مبدأ التشغيل

يوفر معيار HTML5 الدعم لسحب وإفلات كائنات الصفحة. بالمناسبة، لقد أظهرت بالفعل مثالا على أبسط تنفيذ D&D - السحب والإسقاط باستخدام HTML5. وإلى جانب ذلك، هناك عدد لا بأس به من مكتبات JavaScript التي تنفذ دعم D&D.

ولكن من المهم هنا أن تفهم أنه إذا كنت بحاجة إلى "سحب" الصور من موارد الطرف الثالث، فلن تتمكن من استخدام المكتبات. لأن لن تتمكن من إضافة كود JS الخاص بك إلى صفحة شخص آخر. ومن أجل تنزيل صورة، نحتاج إلى الحصول على عنوان URL الخاص بها، أي. يجب أن ينقل المتصفح أيضًا معلماته مع الكائن المسحوب (على سبيل المثال، سمة src لصورة ما أو علامة img بأكملها).

في هذه الحالة، يمكننا إنشاء "مستقبل" للصور على صفحتنا. سيكون هذا قسمًا عاديًا مع تعيين معالج حدث الإسقاط. إذا قام المستخدم "بإسقاط" الصورة فوق هذا القسم، فسيتم استدعاء المعالج وسيتلقى في المعلمة الأولى كائنًا يحتوي على معلومات حول الصورة التي يتم سحبها.

تطبيق

لنبدأ بصفحة التطبيق الخاصة بنا.





تحميل الصور








يحتوي على كتلتين: الصور - هنا سنعرض الصور المحملة و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 = events.originalEvent.dataTransfer.getData("text/html");
var img_data = srcRegex.exec(data);
$.post("upload.php", ("file_url":img_data), الوظيفة(الدقة) (
استجابة var = eval("(" + res + ")");
$("#صور").append($(" "));
});
عودة صحيحة؛
});

نقوم هنا بتعيين معالجات لأحداث Dragenter وDragleave وDrover. يجب أن تقوم جميعها ببساطة بإرجاع خطأ، ومن أجل إعلام المستخدم بطريقة أو بأخرى أنه يمكن "إسقاط" الصورة، في معالج Dragenter، قمنا بتعيين فئة CSS drop_here لكتلة جهاز الاستقبال.

يتم تنفيذ معظم العمل في معالج حدث الإسقاط. عند حدوث هذا الحدث، نقرأ معلومات حول كائن "إعادة التعيين" و"نقطع" قيمة السمة src، أي. عنوان URL للصورة (السطور 16-18). يتم نقل المعلومات في كائن events.originalEvent.dataTransfer (السطر 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 = Explosion("/", $file_url);
$file_name = urldecode(end($url_segments));
إذا (خطأ !== $file_name) (
$file_name_parts =تفجير("."،$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;
$طول=0;
while (($a=fread($source,1024))&&($length "عنوان URL للملف غير محدد");

إذا (isset($_POST["file_url"])) (
$new_url = upload_from_url($_POST["file_url"]);
$res = array("file_url" => $new_url);
}

صدى json_encode($res);

مبدأ التشغيل هو على النحو التالي. نقرأ عنوان URL للصورة ونحاول تنزيلها (السطور 29-32).

إذا تم تحميل الصورة، فاحفظها في مجلد التحميل. يتم استلام الصورة من خادم بعيد باستخدام وظائف fread. تتم قراءة الملف في كتل بحجم 1 كيلو بايت (الأسطر 15-18). يتيح لك هذا الأسلوب مقاطعة تنزيل الملف إذا تجاوز حجمه حدًا محددًا (300 كيلو بايت في هذه الحالة).

بعد تنزيل الملف، نقوم بإنشاء عنوان URL له وإرساله إلى المتصفح بتنسيق JSON.

كما ترون، تنفيذ مثل هذا محمل الإقلاع ليس بالأمر الصعب. وهي مريحة جدًا للاستخدام. وبطبيعة الحال، فإن العيب الرئيسي هو دعم المتصفح لـ HTML5، أو بالأحرى عدم وجوده

ومع ذلك، إذا كنت تقوم بإنشاء واجهة لموظفي الشركة، ويمكنك تحديد نوع المتصفح، فيمكن استخدام HTML5.

أولاً، بالطبع، تحتاج إلى إنشاء عنصر "يلتقط" الملف. بالإضافة إلى ذلك، سنضع علامة امتداد في هذا العنصر لعرض رسائل حول حالة التحميل و مدخلمع النوع ملف، حتى لا يقتصر اختيار الملف على السحب والإفلات، ولكن أيضًا للسماح للمستخدمين بتحديد ملف من خلال النقر على هذه المنطقة المخصصة. ويرد أدناه الشكل النهائي لمثل هذا الهيكل.

انقر هنا أو قم بسحب وإسقاط الملف للتحميل.

CSSالى هذا لغة البرمجةالكود غير ملحوظ، باستثناء تصميم الحقل مدخل:

#ملف (العرض: 100%؛ الارتفاع: 100%؛ العرض: كتلة؛ الموضع: مطلق؛ أعلى: 0؛ يسار: 0؛ العتامة: 0.01؛)

نحن أيضًا نصف فئتين، عند إضافتهما إلى منطقة "التقاط" الملف، ستشير إلى نجاح تنزيل الملف أو حدوث خطأ في حالة حدوثه:

#drop-zone.success(لون الخلفية:#2ecc71;) #drop-zone.error(لون الخلفية:#e74c3c;)

الآن يمكننا أن ننتقل إلى كتابة "الإجراء" الخاص بصفحتنا. أولاً، دعنا نكتب في المتغيرات إشارات إلى الكائنات التي سنصل إليها كثيرًا:

var dropZone = document.getElementById("drop-zone"); var msgContainer = document.querySelector("#drop-zone .text");

بعد ذلك، سوف نتخلص من الأحداث الافتراضية عندما يضرب المؤشر منطقة استلام الملفات لدينا على النحو التالي:

var eventsClear = function (e) ( e.stopPropagation(); e.preventDefault(); ) dropZone.addEventListener("dragenter", eventsClear, false); dropZone.addEventListener("dragover", eventsClear, false);

DropZone.addEventListener("drop"، الوظيفة (e) ( if(!e.dataTransfer.files) return; e.stopPropagation(); e.preventDefault(); sendFile(e.dataTransfer.files); ), false); document.getElementById("file").addEventListener("change", function (e) ( sendFile(e.target.files); ), false);

في كلتا الحالتين، ينتهي الحدث باستدعاء دالة إرسال ملف، حيث يتم نقل الملف المستلم من المستخدم.

هذه الوظيفة مسؤولة عن نقل الملف إلى الخادم. يمكنك رؤية وصفه أدناه.

var sendFile = function(file) ( // إزالة فئات الحالة التي كان من الممكن إضافتها // إذا كان المستخدم قد حاول بالفعل تنزيل شيء ما dropZone.classList.remove("success"); dropZone.classList.remove("error") // التحقق باستخدام تعبير عادي لنوع الملف // (في المثال، يُسمح بتحميل الصور فقط) var re = /(.jpg|.jpeg|.bmp|.gif|.png)$/i ; exec(file.name)) ( msgConteiner.innerHTML = "تنسيق الملف غير صالح!"؛ dropZone.classList.remove("success"); dropZone.classList.add("error"); ) else ( var fd = new FormData ; ( ); // إنشاء كائن نموذج fd.append("upfile", file); // إضافة ملف إلى نموذج الإرسال var xhr = new XMLHttpRequest(); = statChange؛ // الإرسال إلى الخادم)

كما لاحظت، قبل إرسال البيانات إلى الخادم، يتم أيضًا تعيين حدثين، الأول منهما مسؤول عن عرض تقدم التنزيل، والثاني للإعلام بنتيجة التنزيل. تعمل على النحو التالي:

var showProgress = function(e) ( if (e. lengthComputable) ( // احسب نسبة التحميل var بالمائة = Math.floor((e.loaded / e.total) * 100); // عرض النسبة المئوية الحالية msgConteiner.innerHTML = " جارٍ التحميل... ("+ نسبة مئوية +"%)"); var statChange = function (e) ( if (e.target.readyState == 4) ( // عند الانتهاء من معالجة الطلب إلى الخادم if (e.target.status == 200) ( // إذا كان الطلب ناجحًا msgConteiner.innerHTML = "تم التحميل بنجاح!"; dropZone.classList.remove("error"); dropZone.classList.add("success"); // else msgConteiner.innerHTML = "حدث خطأ!"; dropZone.classList.remove("success"); dropZone.classList.add("error" ) )

ستكون المرحلة النهائية هي معالجة البيانات التي يتلقاها الخادم.

تحياتي للجميع! أريد في هذه المقالة أن أتحدث عن العديد من تجاربي مع HTML5. سأبدأ من بعيد. يتعين علينا جميعًا العمل بشكل دوري مع واجهات الويب المختلفة وغالبًا ما نشعر أنه يمكن تنظيم هذا العمل بشكل أكثر كفاءة.

ربما يقع اللوم في بعض الحالات على مطوري الخدمة، ولكن غالبًا ما تكمن المشكلة في القيود التي تفرضها المتصفحات. دعونا نفكر في تحميل الملفات إلى الخادم. في معظم الحالات، سيظهر لك حقل قياسي يحتوي على زر لتحديد ملف من جهاز الكمبيوتر الخاص بك و/أو حقل يمكنك من خلاله تحديد عنوان URL لملف موجود في مكان ما على الإنترنت.

لن نتطرق إلى تنزيل الملفات من جهاز كمبيوتر محلي في الوقت الحالي، وأخطط لنشر منشور منفصل حول هذا الموضوع، فلننظر إلى التنزيل من خادم بعيد.

المشاكل تبدأ من الخطوة الأولى. حتى إذا كنت تفهم بوضوح مكان البحث عن عنوان URL وتجيد استخدام أدوات مثل firebug، فسيظل الأمر يتطلب بضع نقرات للحصول على العنوان الصحيح. سيكون الأمر أكثر ملاءمة لسحب الصورة المطلوبة من نافذة متصفح إلى أخرى.

سأعرض مثالاً على تنفيذ مثل هذه الواجهة في هذه المقالة. إذا كنت تريد، يمكنك أن ترى كيف يعمل على الصفحة التجريبية أو .

ملحوظة! هذا المثال يعمل فقط في متصفح Google Chrome. من الناحية النظرية، يدعم Firefox وSafari جميع التقنيات الضرورية، لكنني لم أكتشفها بعد. لقد التقطت بشكل أساسي صورًا من ويكيبيديا كأشياء للسحب. تمت ملاحظة العديد من المشكلات المتعلقة بالأحرف غير اللاتينية في عناوين URL للصور، ولكن لكي لا أثقل كاهل المثال بعمليات التحقق والتحويلات، تركتها كما هي.

مبدأ التشغيل

يوفر معيار HTML5 الدعم لسحب وإفلات كائنات الصفحة. بالمناسبة، لقد أظهرت بالفعل مثالا على أبسط تنفيذ D&D - السحب والإسقاط باستخدام HTML5. وإلى جانب ذلك، هناك عدد لا بأس به من مكتبات JavaScript التي تنفذ دعم D&D.

ولكن من المهم هنا أن تفهم أنه إذا كنت بحاجة إلى "سحب" الصور من موارد الطرف الثالث، فلن تتمكن من استخدام المكتبات. لأن لن تتمكن من إضافة رمز JS الخاص بك إلى صفحة شخص آخر. ومن أجل تنزيل صورة، نحتاج إلى الحصول على عنوان URL الخاص بها، أي. يجب أن ينقل المتصفح أيضًا معلماته مع الكائن المسحوب (على سبيل المثال، سمة src لصورة ما أو علامة img بأكملها).

في هذه الحالة، يمكننا إنشاء "مستقبل" للصور على صفحتنا. سيكون هذا قسمًا عاديًا مع تعيين معالج حدث الإسقاط. إذا قام المستخدم "بإسقاط" الصورة فوق هذا القسم، فسيتم استدعاء المعالج وسيتلقى في المعلمة الأولى كائنًا يحتوي على معلومات حول الصورة التي يتم سحبها.

تطبيق

لنبدأ بصفحة التطبيق الخاصة بنا.

تحميل الصور


يحتوي على كتلتين: الصور - هنا سنعرض الصور التي تم تنزيلها و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 = events.originalEvent.dataTransfer.getData("text/html");
var img_data = srcRegex.exec(data);
$.post("upload.php", ("file_url":img_data), الوظيفة(الدقة) (
استجابة var = eval("(" + res + ")");
$("#images").append($(""));
});
عودة صحيحة؛
});
});
نقوم هنا بتعيين معالجات لأحداث Dragenter وDragleave وDrover. يجب أن تقوم جميعها ببساطة بإرجاع خطأ، ومن أجل إعلام المستخدم بطريقة أو بأخرى أنه يمكن "إسقاط" الصورة، في معالج Dragenter، قمنا بتعيين فئة CSS drop_here لكتلة جهاز الاستقبال. يتم تنفيذ معظم العمل في معالج حدث الإسقاط. عند حدوث هذا الحدث، نقرأ معلومات حول كائن "إعادة التعيين" و"نقطع" قيمة السمة src، أي. عنوان URL للصورة. يتم نقل المعلومات في كائن events.originalEvent.dataTransfer.

ثم نقوم بتكوين طلب AJAX عادي ونمرر عنوان URL الذي تم العثور عليه كمعلمة. سيتلقى البرنامج النصي للخادم (upload.php) عنوان URL للصورة على الخادم البعيد ويقوم بتحميله. واستجابة لطلب AJAX، سيتم إرسال عنوان URL الجديد للصورة المحملة. بدوره، سيقوم معالج طلب AJAX بإنشاء علامة img وإدراجها في كتلة الصور. وبالتالي ستظهر الصور التي تم تنزيلها أعلى حقل التنزيل.

فكر في upload.php

مبدأ التشغيل هو على النحو التالي. نقرأ عنوان URL للصورة ونحاول تنزيلها. إذا تم تحميل الصورة، فاحفظها في مجلد التحميل. يتم استلام الصورة من خادم بعيد باستخدام وظائف fread. تتم قراءة الملف في كتل بحجم 1 كيلو بايت. يتيح لك هذا الأسلوب مقاطعة تنزيل الملف إذا تجاوز حجمه حدًا محددًا (300 كيلو بايت في هذه الحالة).

بعد تنزيل الملف، نقوم بإنشاء عنوان URL له وإرساله إلى المتصفح بتنسيق JSON. كما ترون، تنفيذ مثل هذا محمل الإقلاع ليس بالأمر الصعب. وهي مريحة جدًا للاستخدام. بطبيعة الحال، العيب الرئيسي هو دعم المتصفحات لـ HTML5، أو بالأحرى عدم وجودها، ومع ذلك، إذا كنت تقوم بإنشاء واجهة لموظفي الشركة، ويمكنك تحديد نوع المتصفح، فيمكن استخدام HTML5.

إعداد: يفغيني ريجكوف وإيجور سكورنياكوف تاريخ النشر: 12/06/2011

مهمة

السماح للمستخدم بتحميل الملفات إلى الخادم عن طريق سحبها، على سبيل المثال، من سطح المكتب. علاوة على ذلك، سيكون من الممكن سحب وإسقاط عدة ملفات في وقت واحد.

حل

دعونا نلقي نظرة على المثال التجريبي. يمكن العثور على مثال في الأرشيف. التحقق:

  • إي 6-9
  • فايرفوكس 3.6-4
  • أوبرا 11.1
  • كروم
  • سفاري 5

اسمحوا لي أن ألفت انتباهكم إلى أنه في هذه الحالة تم التحقق منه!= وهو يعمل:

  • IE، بما في ذلك الإصدار 9، لا يدعم File API (التنفيذ القديم)؛
  • يدعم Firefox 3.6+ كل ما تحتاجه. للإصدارات الأقدم - التنفيذ القديم؛
  • يدعم Opera 11.1 File API، لكنه لا يدعم DnD؛
  • يدعم Chrome، بدءًا من الإصدار 10، كل ما تحتاجه؛
  • يدعم Safari كل ما تحتاجه منذ الإصدار 6.

وما فائدة ذلك في هذه الحالة؟ يحصل مستخدمو المتصفحات العادية على مواقع أكثر ملاءمة.

ما يجب تنزيله:
  • البرنامج المساعد (12 كيلو بايت غير مضغوط)
بداية سريعة

نقوم بتوصيل البرامج النصية، ونضيف type =file مع . إذا كان المتصفح لا يدعم المجموعة المطلوبة من واجهات برمجة التطبيقات، فسيتمكن المستخدم من تحميل الصورة بالطريقة القديمة. لكي تتاح له الفرصة لإضافة عدة صور، سنضيف ديناميكيًا زر "+"، والذي سيضيف حقول نوع الإدخال = الملف. لهذه الأغراض، يحتوي معرف الحقل على 0 لتسهيل تنظيم الأسماء الصحيحة للحقول المضافة.

...

بالنسبة للمتصفحات التي تدعم Dnd وFile API، يمكنك إخفاء أو إزالة حقول type=file بالكامل.

كيف تعمل

إذا لم تخوض في الكثير من التفاصيل، فيمكن عرض مبدأ التشغيل في شكل رسم تخطيطي مماثل:

  • (DnD API) يبدأ كل شيء عندما يحرر المستخدم زر الماوس المضغوط - يتم تشغيل حدث الإسقاط؛
  • (DnD API) الحصول على كائن DataTransfer من حدث الإسقاط؛
  • (File API) باستدعاء DataTransfer.files، نحصل على قائمة الملفات - قائمة الملفات التي قام المستخدم بسحبها إلى منطقة التنزيل؛
  • (File API) من خلال تصفح جميع الملفات، نقرأ محتوياتها باستخدام كائن FileReader؛
  • (File API) يستدعي FileReader.readAsDataURL(../../../collect/js-plugins/ui/file) في كل مرة تتم فيها قراءة الملف التالي بنجاح، نقوم بتكوين كائن URL للبيانات. عندما يتم تشكيله بالكامل، سيحدث حدث onloadend لكائن FileReader؛
  • عندما نتلقى البيانات: كائن URL، يمكننا استبدال هذه البيانات في src وعرضها، وكذلك إرسال البيانات في شكل ثنائي إلى الخادم؛
  • (XMLHttpRequest 2) نرسل البيانات بشكل غير متزامن، وباستخدام الميزات الجديدة للإصدار الثاني من بروتوكول XMLHttpRequest، نتلقى بيانات حول حالة التنزيل (حدث التقدم)، مما يسمح لنا بإبلاغ المستخدم.
    • البرنامج المساعد للتحميل الجميلة

    التحديث: 09.18.12 بواسطة أندريه كوسياك.

    مكون إضافي مناسب تمامًا لـ js لتحميل الملفات إلى الخادم. مكتوب بلغة JS خالصة. وهو يتألف من جزء الخادم (بعدة لغات) وجزء العميل (JS وCSS).

    لايستخدم فلاش وأي أطر.

    يستخدم Fineuploader كائن XMLHttpRequest لنقل الملفات باستخدام شريط التقدم للمتصفحات الحديثة، وبالنسبة لأي سلة مهملات، يتم استخدام طريقة iframe القديمة الجيدة.

    دعونا تعرف:
    • المشروع على جيثب
    • التجريبي الأصلي
    • التوثيق (باللغة الإنجليزية)

    التحقق:

    • إي 7-9
    • فايرفوكس 3.6+
    • أوبرا 10.6+
    • كروم
    • سفاري 4+
    بداية سريعة

    يجب التحقق من وظائف المكون الإضافي حصريًا من الخادم (المحلي جيد). في المثال سأستخدم جزء الخادم في PHP.

    قبل البداية الأولى، تحتاج إلى إعداد الأرض:

      على الخادم المحلي، أول شيء سيطلبه البرنامج النصي هو زيادة قيم معلمات post_max_size وupload_max_filesize. افتح ملف php.ini، وابحث عن هذه المعلمات واضبط القيم على >= 10M. على الخادم الحقيقي، من المرجح ألا يكون هذا العنصر مطلوبًا.

      • إذا قمنا بالاختبار على خادم ويب، فقم بتعيين الأذونات على 777
      • إذا اختبرنا على المستوى المحلي، ففي خصائص المجلد نقوم بإلغاء تحديد مربع الاختيار "للقراءة فقط" (قد يعمل بدون هذا)

    • من المجلد /server الخاص بالمكون الإضافي، نأخذ ملف php.php. في الكتلة الأولى من التعليقات مكتوب فيه الخطوط التي يجب استخراجها من التعليقات من أجل تهيئة الفصل. أضف مباشرة بعد كتلة التعليق:

      // امتدادات الملفات المسموح بها $allowedExtensions = array(); // الحد الأقصى لحجم الملف $sizeLimit = 10 * 1024 * 1024؛ // تهيئة الفئة $uploader = new qqFileUploader($allowedExtensions, $sizeLimit); // هنا تحتاج إلى تحديد المسار إلى مجلد /uploads $result = $uploader->handleUpload("../uploads/"); // إرجاع الاستجابة بعد حفظ الملف echo htmlspecialchars(json_encode($result), ENT_NOQUOTES);

    نحن نربط البرنامج النصي والأنماط:

    الرجاء تمكين JavaScript لاستخدام أداة تحميل الملفات.

    تهيئة JS:

    Window.onload = function())( var uploader = new qq.FileUploader(( element: document.getElementById("file-uploader1")، الإجراء: "php/upload.php" // المسار إلى جانب الخادم للمكون الإضافي )));

    ليس لهذا الترميز أي علاقة بالسحب والإسقاط على وجه التحديد. إنه مجرد وضع عادي وعملي، وإن كان مع بعض عناصر HTML الإضافية للحالات المحتملة.

    اختر ملفًا أو اسحبه هنا. تم التحميل! خطأ! .

    سنقوم بإخفاء تلك الحالات حتى نحتاج إليها:

    Box__dragndrop، .box__uploading، .box__success، .box__error (العرض: لا شيء؛)

    شرح بسيط:

    • فيما يتعلق بالحالات: سيكون عنصر .box__uploading مرئيًا أثناء عملية Ajax لتحميل الملف (وسيظل العناصر الأخرى مخفية). ثم سيتم عرض .box__success أو .box__error اعتمادًا على ما يحدث.
    • الإدخال والتسمية هما الأجزاء الوظيفية للنموذج. لقد كتبت عن تصميم هذه العناصر معًا في رسالتي حول تخصيص مدخلات الملفات. في هذا المنشور وصفت أيضًا الغرض من السمة. يعمل الإدخال والتسمية أيضًا كبديل لتحديد الملفات بالطريقة القياسية (أو الطريقة الوحيدة إذا كان السحب والإفلات غير مدعوم).
    • سيتم عرض .box__dragndrop إذا كان المتصفح يدعم وظيفة تحميل الملفات بالسحب والإفلات.
    كشف الميزة

    لا يمكننا الاعتماد بنسبة 100% على المتصفحات التي تدعم السحب والإفلات. يجب أن نقدم حلاً احتياطيًا. وهكذا: كشف الميزة. يعتمد سحب وإسقاط الملفات على عدد من واجهات برمجة تطبيقات JavaScript المختلفة، لذلك سنحتاج إلى التحقق منها جميعًا.



    تحميل...
    قمة