1. بعض الطرق لتحقيق معاينة الصورة.
بعد فهمه ، تكون الأساليب متشابهة بالفعل. ربما هناك الطرق التالية:
① اشترك في حدث onChange لعنصر الإدخال [type = file].
بمجرد تغيير المسار المحدد ، يتم تحميل الصورة على الخادم ، ويتم إرجاع عنوان الصورة إلى جانب الخادم وتعيينه لعنصر IMG.
العيوب: عبء العمل كبير. بعض التحميلات ليست الصور التي يحتاج المستخدمون إلى تحميلها في النهاية. ومع ذلك ، ستقوم هذه الطريقة بحفظ جميع الصور المحددة أثناء عملية التحميل إلى الخادم ، مما سيؤدي إلى إهدار الموارد. علاوة على ذلك ، فإن تنظيف صور المعاينة المؤقتة على جانب الخادم يتطلب أيضًا قدرًا معينًا من العمل.
② استخدم ميزة HTML5 الجديدة.
يوفر هذا الكائن العديد من الطرق ذات الصلة ، وهي الطريقة الأكثر أهمية هي ReadAsdataurl. انقر لي لمعرفة المزيد.
العيوب: سيؤدي مخطط URI للبيانات التي تم الحصول عليها من خلال طريقة ReadAsdataurl لـ FileReader إلى إنشاء سلسلة Base64 طويلة جدًا. إذا كانت الصورة أكبر ، فستكون السلسلة أطول. في حالة حدوث تراجع الصفحة ، فإنه سيؤدي إلى تدهور الأداء. علاوة على ذلك ، فإن دعم المتصفح غير متسق ، والمتصفحات المدعومة هي: FF3.6+، Chrome7+، IE10+.
③ استخدم window.url.createObjecturl بدلاً من fileReader ، ثم استخدم مرشح dximagetransform.microsoft.alphaimageloader ليتوافق مع IE.
العيوب: نظرًا لاعتبارات الأمان في IE11 ، لا يمكن الحصول على العنوان الحقيقي للملف المحدد للمستخدم من خلال القيمة ، OuterHTML و GetAttribute على عنصر الإدخال [type = file] ، ويمكن الحصول عليها فقط.
D:/اسم الملف/اسم الملف. لذلك ، تحتاج إلى استخدام المستند. SELECTION.CREATERANGECOLLECTION للحصول على العنوان الحقيقي.
2. إنتاج المكونات الخاصة بي
لقد اخترت طريقة أكثر تحفظًا ، وهي الطريقة الثالثة لاستخدام Window.Url.CreateBjecturl بدلاً من Filereader ، ثم استخدم DimizageTransform.microsoft.alphaimageloader مرشح لتكون متوافقة مع IE.
① الخطوة الأولى هي تخطيط HTML
<div id = "pic"> <img id = "معاينة" src = "../ imgs/default.jpeg"> </div> <إدخال type = "file" id = "uploadbtn" قبول = "image/*" onChange = "setPreviewpic ()">>
هل تريد أن تقول بسهولة؟
② Second Step ، المكونات الإضافية JS.
1. إنشاء كائن
أتبنى بشكل أساسي طريقة الميراث المشتركة وأغلف طريقتين ، وهما تحميل الصورة الواحدة وتحميل الصور المتعددة. لأنه سواء كان يتم تحميل صورة واحدة أو تحميل صورة واحدة ، فأنت بحاجة إلى تمرير زر الإدخال وتحميله ، وعلامة IMG ، و DIV ملفوفة في IMG ، والحد الأقصى لقيمة الصورة المفردة ، في KB. لذلك ، يجب تمرير هذه المعلمات الأربعة عند إنشاء كائن صورة التحميل. طريقة إنشاء هذا الكائن هي كما يلي:
var setpreviewpic = function (fileObj ، معاينة ، picwrap ، maximgsize) {this.fileObj = fileObj ؛ this.preview = معاينة ؛ this.picwrap = picwrap ؛ this.maximgsize = maximgsize ؛}2. تحديد نمط المطابقة
نظرًا لأنه يتم تحميل الصور ، بالإضافة إلى إضافة قبول = "Image/*" للإدخال وصنع قيود أولية ، هناك حاجة أيضًا إلى انتظام JS لتحديد ما إذا كانت صورة من خلال اكتشاف المسار. لذا حدد هذا النمط على النموذج الأولي للاستخدام في طريقتين:
setPreviewpic.prototype.pattern = new regexp ('/. (jpg | png | jpeg)+$' ، 'i') ؛3. تحديد الطريقة
الشيء الرئيسي هو تحديد ما إذا كانت البيئة أقل من IE11 وكتابة نوعين من الحلول. الأول هو معاينة الصورة مباشرة عن طريق تغيير SRC لـ IMG ، والثاني هو تحقيق تأثير المعاينة من خلال المرشحات تحت الإصدار السفلي من IE.
FF ، Chrome ، IE11 أو أعلى: (يتم نشر رمز معاينة الصور المتعددة هنا)
<span> if (maxpics) {</span> <br> if (this.fileobj.files && this.fileobj.files [0]) {var imgs = this.picwrap.queryselectall ('img') ؛ // ابحث عن عدد الصور الموجودة بالفعل في dom var num = imgs.length ؛ var html = this.picwrap.innerhtml ؛ إذا كان (رقم (num) <الرقم (maxpics)) {// upply ما إذا كان يتم تجاوز الحد الأقصى للتحميل إذا (num == 1 && (! imgs [0] .classlist.contains ('newload'))) {// تغطية الصورة الافتراضية الأولى html = '' ؛} if (this.pattern.test (fileobj.files [0] .Name)) {if ( style = "margin: 5px ؛ width: '+width+' px ؛ height: '+height+' px ؛" src = '+window.url.createBjecturl (this.fileobj.files [0])+' /> '+html ؛ this.picwrap.innerhtml = html ؛} آخر {تنبيه ('الصورة التي قمت بتحميلها كبيرة جدًا!) ؛}} آخر {Alert (' ما تم تحميله لا يبدو أنه صورة ، يرجى التحقق منه!)بموجب IE11 ، استخدم المرشحات لتحقيق التأثير:
var nums = this.picwrap.childnodes.length ؛ // لأن QuerySelectorAll وغيرها من الأساليب لا يتم دعمها أدناه IE6 ، يمكننا الحكم إذا (nums <maxpics+2) من خلال طول ehildnodes إذا (nums <maxpics+2) {// إضافة 2 هنا. if (document.selection) {var imgsrc = document.selection.createRange (). text ؛ var image = new image () ؛ Image.src = imgsrc ؛ filesize = image.filesize ؛ إذا (justgeize (image.filesize/1024 ، this.maximgsize)) {// يجب تعيين حجم div في ie var eLe = document.createElement ('div') ؛ ele.style.width = width+'px' ؛ ele.style.height = height+'px' ؛ ele.style.filter = "progid: dximagetra nsform.microsoft.alphaimageLoader (sizingmethod = scale ، src = '"+imgsrc+"') " الصورة التي تم تحميلها غير صحيحة ، يرجى تحديد مرة أخرى! ') ؛ return false ؛} this.preview.style.display = 'none' ؛ document.selection.empty () ؛} آخر {تنبيه ('الصورة التي تم تحميلها كبيرة جدًا!') ؛}}في هذه المرحلة ، تم ذلك!
الاستخدام:
<script type = "text/javaScript" src = "../ js/singlepic.js"> </script> <script> var fileObj = document.getElementById ('uploadbtn') ؛ var feariew = document.getElementById ('Feariew') ؛ var picwrap = document.getElementByid ('pic') ؛ SetPreviewpic (FileObj ، معاينة ، picwrap ، 100) ؛ // تحديد كائن صورة التحميل ، المعلمات هي زر الإدخال لتحميل الصورة ، حزمة علامة IMG ، Div ملفوفة في IMG ، وقيمة الصورة المفردة القصوى ، والوحدة هي kbobj.uploadsinglepic (200،250) // ToploadPics (200،250،2) ؛ // ToploadPics (200،250،2) ؛ // ToploadPics (200،250،2) ؛ // ToploadPics (200،250،2) ؛ // تحميل صور متعددة ، والمعلمات هي العرض والارتفاع والحد الأقصى لعدد التحميلات} </script>ما ورد أعلاه هو المعرفة ذات الصلة حول إنتاج المكونات الإضافية لـ JS Upload Pheasour (متوافق مع IE6) المقدمة لك من قبل المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، يرجى ترك رسالة لي. سوف يرد المحرر إليك في الوقت المناسب!