تعليق: اليوم ، سوف أشارككم تطبيقًا بسيطًا لإظهار طريقة استخدام FileReader. FILEREADER هو واجهة برمجة تطبيقات تشغيل الملفات المقدمة في HTML5. يمكن للأصدقاء الذين يحتاجون إليها التعرف على ذلك.
في المقالات السابقة ، قمت بمشاركة العديد من أمثلة HTML5 معك ، وهي عرض وظيفة السحب والإسقاط ، عرض محتوى الصفحة القابل للتحرير ، وتوضيح وظيفة التخزين المحلي. اليوم ، سوف أشارككم تطبيقًا بسيطًا لإظهار طريقة استخدام FileReader ، واجهة برمجة تطبيقات تشغيل الملفات المقدمة في HTML5.عندما تنظر إلى أمثلة HTML 5 التي كتبتها سابقًا ، أفكر في إنشاء مثال بسيط ولكن معمول به لحفر ميزات HTML5 الجديدة هذه بطريقة أكثر غرابة. هدفي ليس ببساطة إظهار واجهات برمجة التطبيقات HTML 5 ، ولكن استخدام أمثلة لإخبار المطورين كيفية تنفيذ واجهات برمجة التطبيقات هذه حقًا بطريقة عملية ومبتكرة.
في HTML5 ، يصبح الوصول إلى نظام الملفات المحلي من صفحة ويب بسيطة للغاية ، أي باستخدام ملفات واجهة برمجة تطبيقات الملف. توفر مواصفات الملف هذه واجهة برمجة تطبيقات لتمثيل كائنات الملف في تطبيق الويب. يمكنك اختيارهم والوصول إلى معلوماتهم من خلال البرمجة. يتضمن API هذا الملف:
يمثل تسلسل FileList مجموعة من الملفات الفردية المحددة في النظام المحلي. يمكن تنفيذ واجهة المستخدم المستخدمة لتحديد ملف من خلال الاتصال <input type = file>.
واجهة blob التي تمثل البيانات الثنائية الأصلية ، والتي يمكنك من خلالها الوصول إلى بيانات البايت في الداخل.
تحتوي واجهة الملف على معلومات السمة للقراءة فقط لملف ، مثل اسم الملف ونوع الملف وعنوان الوصول إلى بيانات الملف.
واجهة fileReader التي توفر طريقة لقراءة ملف ونموذج الحدث يحصل على نتيجة قراءة ملف.
واجهة FileRror وكائن FileException يحدد شروط توليد الأخطاء في هذه المواصفات.
كيفية استخدام هذا المثال: في هذا المثال ، أعطيت لوحة Artboard حيث يمكنك سحب وإسقاط صورة من نظام الملفات المحلي ، أو يمكنك أيضًا استخدام مربع تحديد الملف لتحديد الصورة. في المثال ، يرجى تحديد ملف الصورة فقط ، لم أقم بإضافة تصفية الملف ونوع الملف. تذكر أنه لا يوجد متصفح ينفذ HTML5 بالكامل. يجب تشغيل هذا المثال على متصفح يدعم HTML5 ، مثل Firefox 3.5 أو أعلى.
الطريقة الرئيسية لتنفيذ واجهة برمجة تطبيقات الملف بسيطة للغاية ، تمامًا مثل ما يلي:
وظيفة التصور (myfiles) {
لـ (var i = 0 ، f ؛ f = myfiles [i] ؛ i ++) {
var imagereader = new fileReader () ؛
ImageReader.onload = (Function (Afile) {
وظيفة الإرجاع (هـ) {
var span = document.createElement ('span') ؛
span.innerhtml = ['<img src = "' ، e.target.result ، '"/>'].
document.getElementById ('Thumbs') .InserTbefore (span ، null) ؛
} ؛
}) (و) ؛
ImageReader.ReadasDataurl (F) ؛
}
}
وظيفة dropit (e) {
تصور (e.datatransfer.files) ؛
E.StopPropagation () ؛
E.PreventDefault () ؛
}
اخترت وضع حدث ONDROP الخاص بي على <td>:
<td align = الارتفاع الأيسر = 105 ″ Ondragenter = return false OnDragover = return false OnDrop = dropit (event)>
<output id = thumbs> </upture>
</td>
في هذا المثال ، أقوم فقط بسحب الملف المحلي إلى Artboard. ومع ذلك ، أعتقد أنه يمكن أن يوضح لك القدرات البسيطة ولكن القوية لملفات واجهة برمجة التطبيقات