يحتوي API المقدم في HTML5 على ثروة من التطبيقات في الواجهة الأمامية. كما أن توافق كل متصفح أفضل أيضًا ، بما في ذلك محطة الهاتف المحمول ، باستثناء IE يدعم فقط إصدار IE10 أو أعلى. إذا كنت ترغب في إتقان وظيفة ملف التشغيل بشكل أفضل ، فيجب عليك أولاً التعرف على كل API.
كائن FileList وكائن الملفيحتوي تسمية الإدخال [type = file] في HTML على سمة متعددة ، مما يسمح للمستخدمين باختيار ملفات متعددة ، ويعني كائن FileList قائمة بالملفات المحددة من قبل المستخدم. كل ملف في هذه القائمة هو كائن ملف.
<نوع الإدخال = معرف الملفات المتعددة> <script> var elem = document.getElementById ('files') ؛ هو صور وحجم الملف أقل من 200 كيلو بايت إذا (الملفات [i] .type.indexof ('Image/')! == -1 && files [i] .size <204800) {console.log (ملفات [i] .NAME) ؛}}} </script>هناك سمة وصول في الإدخال يمكن استخدامها لتحديد نوع الملف الذي يمكن إرساله عن طريق تحميل الملف.
قبول = Image/* يمكن استخدامها للتقييد فقط لتحميل تنسيقات الصورة. ومع ذلك ، هناك مشكلة في الاستجابة البطيئة تحت متصفح WebKit.
الحل هو تغيير* تمرير إلى نوع MIME المحدد.
أقلكائن blob
يعادل كائن BLOB حاوية يمكن استخدامها لتخزين البيانات الثنائية. يحتوي على سمتين ، ويمثل سمة الحجم طول البايت ، ويمثل سمة النوع نوع MIME.
كيفية إنشاء
يمكن إنشاء كائن blob باستخدام وظيفة بناء blob ().
var blob = new Blob (['hello'] ، {type: text/plain}) ؛المعلمة الأولى في مُنشئ Blob هي صفيف يمكنه تخزين كائنات ArrayBuffer ، وكائنات ArrayBufferview ، وكائنات blob والسلسلة.
يمكن لكائن blob إرجاع كائن blob جديد من خلال طريقة الشريحة ().
var newblob = blob.slice (0،5 ، {type: text/plain}) ؛تستخدم طريقة الشريحة () ثلاث معلمات ، كلها اختيارية. تمثل المعلمة الأولى موضع بدء البيانات الثنائية في كائن BLOB ، وتمثل المعلمة الثانية نهاية النسخ المتماثل ، والمعلمة الثالثة هي نوع MIME لكائن BLOB.
Canvas.toBlob () يمكن أيضًا إنشاء كائنات blob. يستخدم Toblob () ثلاث معلمات ، الأول هو وظيفة رد الاتصال ، والثاني هو نوع الصورة ، والافتراضي هو Image/PNG ، والثالث هو جودة الصورة ، والقيمة بين 0 و 1.
var canvas = document.getElementById ('canvas') ؛ تنزيل الملفيمكن لكائنات BLOD إنشاء عنوان شبكة من خلال Window.url كائن ، مع سمة التنزيل الخاصة بالعلامة A لتحقيق وظيفة ملف التنزيل.
على سبيل المثال ، قم بتنزيل Canvas كملف صورة.
var canvas = document.getElementById ('canvas') ؛ var url = url.createObject "blob) ؛ var a = document.createlement ('a') ؛ A.Download = 'canvas' ؛ A.Href = url ؛ // يحاكي علامة لتنزيل A.Click () ؛ / / أخبر المتصفح بعد التنزيل.يمكن أيضًا حفظ السلسلة كملف نصي بطريقة مماثلة.
كائن FileReaderيتم استخدام كائن FileReader بشكل أساسي لقراءة الملف في الذاكرة وقراءة البيانات في الملف. قم بإنشاء كائن FileReader عن طريق بناء وظيفة
var reader = new FileRereader () ؛
الكائن لديه الطرق التالية:
يتمثل التطبيق الشائع في عرض الصورة من خلال ReadAsdataurl () بعد تحميل الصور على العميل.
<type type = file id = files accousit = image/jpeg ، image/jpg ، image/png> <img src = blank.gif id = Preview> <script> var elem = d ('files') ، img = document. getElementByid ('معاينة') ؛ .src = ev.target.result ؛} reader.readasdataurl (ملفات [0]) ؛}} </script>ومع ذلك ، عندما تلتقط صورًا على بعض الهواتف المحمولة ، سيكون هناك أخطاء عند تحميل الصور ، وسيتم العثور على الصور ، بما في ذلك Samsung و iPhone. جوهر جوهر لا يشرح الحل هنا.
النسخ الاحتياطي للبيانات والاسترداديمكن لـ READASTEXT () من كائن FileReader قراءة نص الملف ، مع وظيفة كائن Blob لتنزيل الملف ، ثم يكون ملف تصدير البيانات احتياطيًا إلى المنطقة المحلية. من خلال الإدخال واستخدام ReadastExt () لاستخدام ReadastExt () قراءة النص واستعادة البيانات.
الرمز يشبه الوظيفة أعلاه.
BASE64 الترميزتتم إضافة طرق ATOB و BTOA إلى HTML5 لدعم ترميز BASE64. تسميةهم بسيطة للغاية.
var = https: //lin-xin.github.io ؛ iconsole.log (B) ؛
تقوم طريقة BTOA بترميز السلسلة A ، والتي لن تغير قيمة A ، وإرجاع قيمة بعد الترميز.
طريقة ATOB تفكك السلسلة المشفرة.
ومع ذلك ، فقد تجاوز الصينيون في المعلمات نطاق الأحرف من ترميز ASCII 8 -Pit ، وسيقوم المتصفح بالإبلاغ عن خطأ. لذلك ، تحتاج إلى تشفير المكون EncodeUricompon.
var = Hello World ؛
ما سبق هو كل محتويات هذا المقال.