JS ينفذ معاينة الصورة الأمامية النقية

تحميل الصورة هو وظيفة عادية ، ومعاينة الصور هي وظيفة فرعية لا غنى عنها في وظيفة التحميل. قبل ذلك ، اعتدت على الاشتراك في حدث onChange لعنصر الإدخال [type = file] ، بمجرد تغيير المسار ، يتم تحميل الصورة على الخادم ، ثم يتم الحصول على مسار الصورة ويتم تعيين القيمة لعنصر IMG. بغض النظر عن الحل لتقديم الملفات غير المتزامن ، فإن تنظيف صور معاينة مؤقتة على جانب الخادم ، مما زاد من عبء العمل.

لقد عثرت بطريق الخطأ على المعلومات ذات الصلة حول معاينة الصورة الأمامية الخالصة من MDN ، ثم قمت بتصنيفها وتسجيلها للرجوع إليها في المستقبل.

1. التحضير 1─filereader

FileReader هي ميزة جديدة لـ HTML5 لقراءة بيانات BLOB وأنواع الملفات. الاستخدام المحدد هو كما يلي:

(1). طريقة البناء

var fr = new fileReader () ؛

(2). صفات

ReadyState: النوع قصير غير موقّع ، الحالة الحالية لمثيل FileReader ، (فارغة 0 ، لم يتم تحميل أي بيانات حتى الآن ؛ التحميل 1 ، يتم تحميل البيانات ؛ تم الانتهاء من 2 ، تم الانتهاء من جميع طلبات القراءة) ، للقراءة فقط.

النتيجة: قراءة محتويات الملف ، القراءة فقط.

خطأ: النوع هو domerror ، يشير إلى وجود خطأ يحدث عند قراءة الملف ، للقراءة فقط.

(3). طريقة

إحباط (): إحباط عملية القراءة وقم بتعيين readystate على القيام به. عندما لا يتم تنفيذ عملية قراءة ، فإن استدعاء هذه الطريقة سوف يرمي استثناء DOM_FILE_ABORT_ERR.

ReadAsarrayBuffer (Blob Blob): قراءة البيانات ، يتم تعيين سمة النتيجة على نوع ArrayBuffer

readastext (blob blob [، encoding = 'utf-8']): قراءة البيانات ، يتم تعيين سمة النتيجة على نوع السلسلة

ReadAsbinaryString (blob blob): قراءة البيانات ، يتم تعيين سمة النتيجة على البيانات الثنائية الأصلية

readasdataurl (blob blob): قراءة البيانات ، يتم تعيين سمة النتيجة على نموذج مخطط URI للبيانات (للحصول على التفاصيل ، يرجى زيارة "JS Magic Hall: مقدمة في مخطط URI للبيانات")

(4). حدث

Onload: تم تشغيله بعد قراءة البيانات بنجاح

Oneerror: يتم تشغيله عند إلقاء استثناء عند قراءة البيانات

OnloadStart: تم تشغيله قبل قراءة البيانات

Onloadend: تم تشغيله بعد قراءة البيانات ، أو التشغيل بعد onload أو onerror

Onabort: تم تشغيله بعد إحباط القراءة

OnProgress: تم تشغيله بشكل دوري أثناء القراءة

(5). دعم المتصفح

FF3.6+، Chrome7+، IE10+

2. التحضير 2─ DidxyageTransform.Microsoft.AlphaimageLoader مرشح

(1). الوظيفة: تتمثل الوظيفة الرئيسية في معالجة الصور بشفافية (IE5.5 ~ 6 لا تدعم PNG الشفافة)

(2). كيفية استخدام الأنماط

 #preview {filter: progid: dimizageTransform.Microsoft.AlphaimageLoader (ZizeMethod = Scale ، src = "dummy.png") ؛}

(3). كيفية استخدام في JS

 var Preview = document.getElementById ('Preview') ؛ Preview.Style.Filter = Preview.CurrentStyle.Filter + "؛ progid: dximageTransform.microsoft.alphaimageLoader (sizingmethod = scale ، src = 'dummy.png')" ؛ معاينة.

(4). صفات

تمكين: اختياري ، الإعداد ما إذا كان يتم تنشيط المرشح. نطاق القيمة صحيح (افتراضي) ، خطأ

SIZEMETHOD: اختياري ، يعين كيفية عرض صورة تصفية المرشح داخل حدود الحاوية ، محصول نطاق القيمة (قم بقطع الصورة لتناسب حجم الحاوية) ، الصورة (القيمة الافتراضية ، زيادة أو تقليل حجم الحاوية لتناسب حجم الصورة) ، المقياس (توسيع نطاق الصورة لتناسب حجم الحاوية)

SRC: مطلوب ، استخدم عنوان URL المطلق أو النسبي للإشارة إلى صورة الخلفية. عندما يكون عنوان URL هو العنوان المحلي لجهاز كمبيوتر المستخدم ، سيتم إلقاء استثناء لا يسمح بالوصول إلى نظام الملفات المحلي عندما يكون SRC لعنصر IMG هو العنوان المحلي لجهاز كمبيوتر المستخدم.

تطبيق

بعد ذلك ، نستخدم READASDATAURL لـ FILEREADER للحصول على مخطط URI للبيانات لتنفيذ وظيفة معاينة الصور ، ونحن نستخدم المرشح dximagetransform.microsoft.alphaimageloader لتخفيض التصنيف.

شظية HTML:

 <style type = "text/css">#Preview {width: 100px ؛ الارتفاع: 100px ؛} </style> <!-[إذا كان lte ie 9]> <style type = "text/css"> #preview {filter: progid: dimizageTransform.microsoft.alphaimageloader (sizingmethod = scale) ؛ } </style> <!

شظية JS:

 var Preview = function (el) {var pv = document.getElementById ("Preview") ؛ // ie5.5 ~ 9 استخدم المرشحات إذا (pv.filters && typeof (pv.filters.item) === 'function') {pv.filters.item ("dimixagetransform.microsoft.alphaimageLoader"). src = el.value ؛ } آخر {// متصفحات أخرى و IE10+ (المرشحات لا تدعمها) استخدم fileReader var fr = new fileReader () ؛ الاب. pvimg.style.width = pv.offsetWidth + 'px' ؛ pvimg.style.height = pv.offsetheight + 'px' ؛ pvimg.src = evt.target.result ؛ pv.removechild (0) ؛ pv.appendchild (pvimg) ؛ } ؛ Fr.ReadasDataurl (El.Files [0]) ؛ }} ؛

4. حفرة

نظرًا لأن IE11 قد جعلت اعتبارات أمان ، فمن المستحيل الحصول على العنوان الحقيقي للملف المحدد للمستخدم من خلال القيمة ، و OuterHTML و getAttribute على عنصر الإدخال [type = file] ، ويمكنه فقط الحصول على اسم C:/ FakePath. لذلك ، إذا تم استخدام IE11 ، ولكن تم تعيين وضع النص على أقل من 10 ، لا توجد طريقة لتحقيق معاينة الصور.

الحل 1 ─ هذا الجملة تحت علامة الرأس: <meta http-equiv = "x-ua- متوافقة مع content =" ie = edge ">. سيخبر هذا أنه يمكن استخدام أعلى إصدار من IE الحالي لتحليل صفحات الويب وتقديمها افتراضيًا.

الحل 2 ─ use document.selection.createCeColeciton () للحصول على العنوان الحقيقي. العملية المحددة هي كما يلي:

 .

5. الملحق: استخدم window.url.createBjecturl بدلاً من Filereader

سيقوم مخطط URI للبيانات التي تم الحصول عليها من خلال طريقة ReadAsdataurl لـ FileReader بإنشاء سلسلة Base64 طويلة جدًا. إذا كانت الصورة أكبر ، فستكون السلسلة أطول. في حالة حدوث تراجع الصفحة ، فإنه سيؤدي إلى تدهور الأداء. الحل كما يلي:

1. تستخدم علامة IMG المعاينة تحديد المواقع المطلقة للخروج من تدفق المستندات العادي ، والتي لا علاقة لها بالعناصر الأخرى من المستند ، ولن تؤثر على الأداء عند الانتعاش.

2. استخدم window.url.createBjecturl (blob blob) لإنشاء روابط البيانات.

 var createObjecturl = function (blob) {return window [window.webkiturl؟ 'WebKiturl': 'url'] ['createObjecturl'] (blob) ؛} ؛

ملاحظة: رابط البيانات الذي تم إنشاؤه بواسطة window.url.createObjecturl هو الحصري للذاكرة ، لذلك إذا كنت تستخدمه من وقت لآخر ، فأنت بحاجة إلى استدعاء window.url.revokeobjecturl (Domstring Objurl) لتحرير الذاكرة. كما سيتم إصدار المحتوى تلقائيًا عند تحديث الصفحة.

 var solesolveObjecturl = function (blob) {window [window.webkiturl؟ 'WebKiturl': 'url'] ['revokeObjecturl'] (blob) ؛} ؛

ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.