1. ملف API: (ملف API)
كل ملف تم تحديده بواسطة عنصر تحكم نموذج نوع الملف هو كائن ملف ، وكائن FileList هو قائمة مجموعة من كائنات الملفات هذه ، تمثل جميع الملفات المحددة. يرث كائن الملف من كائن blob ، والذي يمثل بيانات RAW ثنائية ويوفر طريقة شريحة للوصول إلى كتل البيانات الأصلية داخل البايتات. باختصار ، يحتوي كائن الملف على كائن Flielist ، ويرث كائن الملف من كائن Blob!
علاقات السمة ذات الصلة لكل كائن:
واجهة FileReader:
كما يتضح من الشكل ، يوفر HTML5 أيضًا واجهة fileReader: تستخدم لقراءة الملفات في الذاكرة وقراءة البيانات في الملف.
var reader = new FileReader () ؛
هناك أربع طرق وستة أحداث في المجموع لهذه الواجهة:
• readAsbinaryString (ملف): اقرأ الملف على أنه ثنائي
• readAsdataurl (ملف): اقرأ ملف dataurl
• readastext (ملف ، [تشفير]): اقرأ الملف كنص
• حول (لا شيء): قراءة الملف المقاطعة
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
• onabort: يتم تشغيله عند قراءة مقاطعات الملف
• onerror: يتم تشغيله عند حدوث خطأ عند قراءة ملف
• OnloadStart: يتم تشغيله عند قراءة الملف
• OnProgress: يستمر في التشغيل عند قراءة الملف
• Onload: يتم تشغيله عند قراءة الملف بنجاح
• Onloadend: نشأ في نهاية قراءة الملف (يتم تشغيل كل من النجاح والفشل)
تحتوي معلمات الحدث أعلاه e على e.target.result أو this.result to to the read result!
2. سحب وإسقاط API:
السحب وإسقاط السمة: اضبط السمة القابلة للسحب للعنصر الذي يحتاج إلى سحب وإسقاط إلى TRUE (Dragable = "TRUE")! يمكن سحب عنصر IMG والعنصر وإسقاطه افتراضيًا.
أحداث السحب والإفلات: (مجزأة في أحداث السحب والإسقاط العناصر وأحداث العناصر المستهدفة)
أحداث العنصر السحب والإفلات:
• DragStart: تم تشغيله قبل السحب
• السحب ، المشغلات بشكل مستمر قبل السحب وبعدها
• السحب ، تحفز نهاية السحب
حدث العنصر المستهدف:
• Dragenter ، أدخل العنصر المستهدف للتشغيل
• السحب ، بين دخول الهدف وترك الهدف ، مما يؤدي إلى استمرار
• DragLeave ، مما يؤدي إلى العنصر المستهدف
• إسقاط ، حرر مشغل الماوس على العنصر المستهدف
لكن! تجدر الإشارة إلى أنه في العنصر المستهدف ، يجب حظر السلوك الافتراضي (يتم رفض السحب والإفلات) في أحداث السحب والإفلات ، وإلا لا يمكن تنفيذ السحب والإفلات!
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
كائن DataTransfer: يتم استخدامه خصيصًا لتخزين البيانات المراد حملها أثناء السحب والإفلات. يمكن تعيينها كخاصية datatransfer لأحداث السحب والإفلات.
3 سمات:
• Effected: تعيين أنماط المؤشر (لا شيء ، نسخ ، Copylink ، Copymove ، Link ، LinkMove ، Move ، All and Imanizized)
• Effected: اضبط المؤثرات المرئية لعمليات السحب والإفلات
• الأنواع: نوع البيانات المخزنة ، وهم زائفة من السلاسل
• الملفات: احصل على الملف السحب الخارجي ، وإرجاع قائمة FileList ، وهناك سمة نوع ضمن FilesList ، والتي تقوم بإرجاع نوع الملف
4 طرق:
• setData (): اضبط مفتاح البيانات والقيمة (يجب أن تكون سلسلة)
• getData (): الحصول على البيانات ، والحصول على القيمة المقابلة وفقًا للقيمة الرئيسية.
• ClearData (): مسح البيانات المخزنة في كائن DataTransfer
• setDragimage (ImageUrl ، log x ، long y): استخدم عنصر IMG لتعيين أيقونة السحب والإفلات
//مثال:
Target.AdDeventListener ('DragStart' ، function (e) {
var fs = e.datatransfer.files ؛ // احصل
var dt = e.datatransfer ؛ // propert
dt.effectallyed = 'copy' ؛
dt.setData ('text/plain' ، 'hello') ؛
dt.setDragimage (dragicom ، -10 ، -10) ؛
}) ؛
3. اسحب معاينة صورة التحميل وإسقاطها:
الأفكار:
1. على دراية بالأحداث الأربعة لعنصر سحب الملف. ملاحظة: يتم حظر السلوك الافتراضي في أحداث OnDragover و OnDrop.
2. بعد سحب وإسقاط ، احصل على مجموعة كائن الملف: e.datatransfer.files
3. قم بحلق كل كائن ملف في المجموعة ، وحكم على نوع الملف وحجم الملف ، وأداء العمليات المقابلة إذا تم تحديد النوع.
4. اقرأ معلومات الملف كائن: جديد fileReader () ، والذي يحتوي على طرق مثل قراءة كائن الملف مثل Dataurl: readAsdataurl (كائن الملف) ، والأحداث التي يتم تشغيلها بعد القراءة الناجحة: حدث Onload ، وما إلى ذلك.
5. قم بإجراء المعالجة المنطقية المقابلة في عدة أحداث في كائن FileReader
HTML:
<viv> <p> يرجى سحب ملف الصورة إلى هذه المنطقة! </p> </viv>
إجمالي عدد التحميل: <span id = 'total'> 100 </span>
JQ:
<script type = "text /javaScript"> $ (function () { / *الأفكار: *1. هو نوع محدد*4. ODIV = $ (". حاوية". op.html (يرجى سحب ملف الصورة إلى هذا المجال!) ؛ Collection // print length console.log (fs.length) ؛ console.log (fs [i] .size) ؛ $ ("#total"). html (E.Total) ؛ OIMG.Attr ("SRC" ، this.result) ؛ التحميل ، يرسل Ajax الملف ، قم بتحميل الملف الثنائي}}} else {Alert ('يرجى تحميل ملف الصورة!') ؛ </script>صورة التكاثر:
ملخص: الجمع بين معرفة API للسحب وإسقاط الأحداث ، كائن DataTransfer وملف قراءة كائن الكائن ، وما إلى ذلك ، لتحقيق تأثير المعاينة لتحميل الصور البسيط والخروج من الصور. تحتاج إلى معرفة علاقة واستخدام كائن وتوضيح أفكار التنفيذ!
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.