1. ملف API
يوفر HTML5 طريقتين: الملف و filereader ، والتي يمكنها قراءة معلومات الملف وقراءة الملفات.
2. مثال
<html> <body> <div id = "test-dimage-preview" style = "الحدود: 1px الصلبة RGB (204 ، 204 ، 204) ؛ العرض: 100 ٪ ؛ الارتفاع: 200 بكسل ؛ حجم الخلفية: يحتوي على الخلفية: </divo> <brepe> <brepe> type = "file" id = "test-image-file"> <script type = "text/javaScript"> var fileInput = document.getElementById ('test-dimage-file') ، info = document.getElementById ('test-file-info') ، معاينة = مستند. Function () {// صورة خلفية: معاينة. الحجم: " + file.size + '<br>" + " FileReader () ؛ reader.readasdataurl (ملف) ؛}) ؛ </script> </body> </html>قراءة الملف في شكل Dataurl هي سلسلة ، على غرار البيانات: Image/JPEG ؛ BASE64 ،/9J/4AAQSK ... (BASE64 الترميز) ...
شائع الاستخدام لإعداد الصور. إذا كانت المعالجة من جانب الخادم مطلوبة ، فأرسل Base64 والأحرف التالية إلى الخادم وفك تشفيره باستخدام BASE64 للحصول على المحتوى الثنائي للملف الأصلي.
3. التفسير
يوضح الرمز أعلاه أيضًا ميزة مهمة لـ JavaScript ، وهو وضع التنفيذ المفرد. في JavaScript ، يتم تنفيذ محرك تنفيذ JavaScript الخاص بالمتصفح دائمًا في وضع واحد متخلف عند تنفيذ رمز JavaScript ، مما يعني أنه في أي وقت ، من المستحيل على رمز JavaScript أن يتم تنفيذ أكثر من مؤشر ترابط واحد في نفس الوقت.
قد تسأل ، كيف تتعامل مع تعدد المهام في وضع واحد من الخيوط؟
في JavaScript ، يُطلق على تعدد المهام في الواقع غير متزامن ، مثل الكود أعلاه:
reader.readasdataurl (file) ؛
سيتم بدء عملية غير متزامنة لقراءة محتويات الملف. نظرًا لأنها عملية غير متزامنة ، لا نعرف متى تنتهي العملية في رمز JavaScript ، لذلك نحتاج إلى تعيين وظيفة رد الاتصال أولاً:
reader.onload = function (e) {// عند قراءة الملف ، تسمى هذه الوظيفة تلقائيًا:} ؛عند اكتمال قراءة الملف ، سيتصل محرك JavaScript تلقائيًا بوظيفة رد الاتصال التي حددناها. عند تنفيذ وظيفة رد الاتصال ، تمت قراءة الملف ، حتى نتمكن من الحصول على محتويات الملف بأمان داخل وظيفة رد الاتصال.
المثال البسيط أعلاه لمعاينة ملف تحميل JS هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.