بالمناسبة ، اليوم ، قمت للتو بتصفح رمز المصدر لـ SwitchySharp الوكيل واكتسبت الكثير من الأشياء ، بما في ذلك قراءة الملفات وحفظها التي سيتم تقديمها في هذه المقالة.
نظرًا لأن Google لا توفر وظيفة مزامنة بيانات المكونات الإضافية ، يجب التعامل مع تكوينات المكونات الإضافية وتصديرها مع الملفات. لأسباب أمنية ، يوفر IE فقط واجهة برمجة التطبيقات للوصول إلى الملفات ؛ ولكن مع وصول HTML 5 ، دعمت المتصفحات الأخرى ذلك أيضًا.
أولاً ، دعنا نتحدث عن قراءة الملف. يوفر W3C بعض واجهات برمجة التطبيقات للملفات ، وأهمها فئة FileReader.
قم أولاً بإدراج علامات HTML التي تحتاجها:
انسخ رمز الرمز كما يلي: <إدخال type = "file" id = "file" onChange = "Handlefiles (this.files)"/>
عند تحديد ملف ، سيتم تمرير القائمة التي تحتوي على الملف (كائن FileList) كمعلمة إلى وظيفة Fonledfiles ().
يشبه هذا الكائن FileList صفيف ، والذي يمكنه معرفة عدد الملفات ، وعناصره هي كائن الملف.
من كائن الملف هذا ، يمكنك الحصول على سمات مثل الاسم والحجم و LastModifiedDate و Type.
تمرير كائن الملف هذا إلى طريقة القراءة لكائن FileReader ويمكنك قراءة الملف.
هناك 4 طرق للقراءة في Filereader:
1. ReadAsarrayBuffer (ملف): اقرأ الملف باعتباره ArrayBuffer.
2. readAsbinaryString (ملف): اقرأ الملف كسلسلة ثنائية
3.ReadasDataurl (ملف): اقرأ الملف كعنوان URL للبيانات
4. ReadastExt (ملف ، [تشفير]): يقرأ الملف كنص ، قيمة الترميز الافتراضية هي "UTF-8"
بالإضافة إلى ذلك ، يمكن أن تتوقف طريقة Abort () عن قراءة الملف.
يجب معالجة كائن FileReader بعد قراءة الملف. من أجل عدم حظر الخيط الحالي ، تعتمد واجهة برمجة التطبيقات نموذج أحداث ، والذي يمكنه تسجيل هذه الأحداث:
1.Onabort: تم تشغيله عند مقاطعة
2. الإرهاق: يتم تشغيله عند حدوث خطأ
3. التحميل: يتم تشغيله عند قراءة الملف بنجاح
4.Olloadend: يتم تشغيله عند قراءة الملف ، بغض النظر عما إذا كان يفشل أم لا
5.OlloadStart: يتم تشغيله عندما يبدأ الملف في القراءة
6-
مع هذه الطرق ، يمكنك معالجة الملفات.
لنحاول قراءة الملفات النصية أولاً:
نسخة الكود كما يلي:
وظائف المقبض (الملفات) {
if (files.length) {
ملف var = الملفات [0] ؛
var reader = new FileReader () ؛
if (/text///w+/.test(file.type)) {
reader.onload = function () {
$ ('<pre>' + this.result + '</pre>'). appendto ('body') ؛
}
reader.ReadastExt (ملف) ؛
}
}
}
this.result هنا هو في الواقع reader.result ، وهو محتوى ملف القراءة.
بعد الاختبار ، ستجد أنه تمت إضافة محتويات هذا الملف إلى صفحة الويب. إذا كنت تستخدم Chrome ، فيجب عليك وضع صفحة الويب على الخادم أو في المكون الإضافي ، وسوف يفشل بروتوكول الملف.
دعنا نجرب الصور مرة أخرى ، لأن المتصفح يمكنه عرض صور بروتوكول URI مباشرة ، لذا أضف الصور هذه المرة:
نسخة الكود كما يلي:
وظائف المقبض (الملفات) {
if (files.length) {
ملف var = الملفات [0] ؛
var reader = new FileReader () ؛
if (/text///w+/.test(file.type)) {
reader.onload = function () {
$ ('<pre>' + this.result + '</pre>'). appendto ('body') ؛
}
reader.ReadastExt (ملف) ؛
} آخر إذا (/image /// w+/. test (file.type)) {
reader.onload = function () {
$ ('<img src = "' + this.result + '" />').
}
reader.readasdataurl (file) ؛
}
}
}
في الواقع ، يدعم الإدخال: التحكم في الملف أيضًا تحديد ملفات متعددة:
نسخة الكود كما يلي:
<type type = "file" id = "files" multives = "" onChange = "Handlefiles (this.files)"/>
وبهذه الطريقة ، يجب اجتياز مقبض المقبض () لمعالجة الملفات.
إذا كنت ترغب في قراءة جزء فقط من البيانات ، فإن كائن الملف يحتوي أيضًا على طرق WebKitsLice () أو Mozslice () ، والتي تستخدم لإنشاء كائنات blob. يمكن قراءة هذا الكائن بواسطة FileReader تمامًا مثل كائن الملف. تتلقى هاتان الطريقتان 3 معلمات: المعلمة الأولى هي موضع البداية ؛ والثاني هو الموضع النهائي ، وعند حذفه ، تتم قراءة نهاية الملف ؛ والثالث هو نوع المحتوى.
للحصول على أمثلة ، يرجى الرجوع إلى "قراءة الملفات المحلية في JavaScript".
بالطبع ، بالإضافة إلى استيراد البيانات وعرض الملفات ، يمكن أيضًا استخدامها لتحميل Ajax. يمكن استخدام الرمز للإشارة إلى "استخدام الملفات من تطبيقات الويب".
بعد ذلك ، احفظ الملف.
في الواقع ، يوفر ملف API: الكاتب 4 واجهات ، ولكن حاليًا فقط بعض المتصفحات (Chrome 8+ و Firefox 4+) تنفذ blobbuilder ، وبقية الواجهات غير متوفرة.
بالنسبة للمتصفحات غير المدعومة ، يمكنك استخدام blobbuilder.js و filesaver.js للحصول على الدعم.
لقد درستها واكتشفت الغموض.
يمكن لـ BlobBuilder إنشاء كائن blob. تمرير كائن blob هذا إلى طريقة url.createObjecturl () ويمكنك الحصول على عنوان URL للكائن. وعنوان URL للكائن هذا هو عنوان تنزيل كائن blob هذا.
بعد الحصول على عنوان التنزيل ، قم بإنشاء عنصر أ ، تعيين عنوان التنزيل إلى سمة HREF ، وتعيين اسم الملف إلى سمة التنزيل (مدعوم من Chrome 14+).
ثم قم بإنشاء حدث نقرة وقم بتسليمه إلى هذا العنصر لمعالجة هذا العنصر ، مما سيؤدي إلى بدء تشغيل المتصفح في تنزيل كائن Blob.
أخيرًا ، استخدم url.revokeObjecturl () لإطلاق عنوان URL للكائن ، لإخطار المتصفح بأنه لا يتعين عليه الاستمرار في الرجوع إلى الملف.
هنا رمز مبسط:
نسخة الكود كما يلي:
var blobbuilder = blobbuilder || WebKitBlobBuilder || Mozblobbuilder.
var url = url || WebKiturl || نافذة
وظيفة SEVEAS (Blob ، اسم الملف) {
var type = blob.type ؛
var force_savable_type = 'application/actet-stream' ؛
if (type && type! = force_savable_type) {// force download ، لا تفتح في المتصفح
var slice = blob.slice || blob.webkitslice || blob.mozslice ؛
blob = slice.call (blob ، 0 ، blob.size ، force_savable_type) ؛
}
var url = url.createBjecturl (blob) ؛
var save_link = document.createelementns ('http://www.w3.org/1999/xhtml' ، 'a') ؛
save_link.href = url ؛
save_link.download = filename ؛
var event = document.createEvent ('mouseevents') ؛
event.InitMousEvent ('click' ، true ، false ، window ، 0 ، 0 ، 0 ، 0 ، 0 ، false ، false ، false ، false ، false ، 0 ، null) ؛
save_link.dispatchevent (event) ؛
url.RevokeObjecturl (url) ؛
}
var bb = new blobbuilder ؛
BB.Append ('Hello ، World!') ؛
Seveas (bb.getblob ('text/plain ؛ charset = utf-8') ، 'hello world.txt') ؛
سيُطلب من ملف نصي الحفظ أثناء الاختبار. يحتاج Chrome إلى وضع صفحات الويب على الخادم أو في المكون الإضافي.