ينفذ Html5 وظائف تحميل الصور الفردية والمتعددة

مقدمة

نتحدث اليوم عن تحميل الصور، فرديًا أو متعددًا، في الوقت الحاضر، يوجد عدد لا يحصى من المكونات الإضافية الرئيسية لتحميل الصور، مثل: Jquery's verupload.js، وjQuery File Upload، وUploadify، وjQuery.filter وما إلى ذلك. لكن. لن نتحدث عن المكونات الإضافية المذكورة أعلاه اليوم، فلنلقي نظرة على كيفية استخدام FileReader في HTML5 لتحقيق معاينة الصور الفردية والمتعددة وحذفها وتحميلها ووظائف أخرى. دعونا نلقي نظرة على التأثير بعد التنفيذ:

هذا هو الزر الذي ينقر عليه المستخدم. أهم جملة لدينا هي نوع الإدخال=ملف ويتم توفير سمة متعددة يمكنها تلبية احتياجات تحميل صور متعددة.

 <div class=form-groupform-row> <label class=col-sm-2 control-label uText>ألبوم النادي</label><div class=row> <div class=col-xs-10 col-sm- 8 mTop5> <label <input type=file Accept=image/* name=ClubImagesUpload id=ClubImagesUpload class=hide multiple=multiple> <img src=/Images/registerNewSite/btn_addimg.png class=addImg/> </label> </div> </div></div>

يتم استخدام المنطقة أدناه لمعاينة الصورة

 <div class=form-groupform-row id=preViewMore><div class=row> <div class=col-xs-9> <div id=clubInputImagePreview class=col-sm-9 img-preview img-preview-sm </div> </div> </div></div>

ماذا؟ عليك أيضًا أن تنظر إلى الأسلوب لترى ما إذا كان لا يزال إنسانيًا (ابتسامة ساخرة)

أولا، دعونا نحلل HTML أعلاه، نستخدم علامة لتغليف الإدخال وعلامة img ونأمل أنه من خلال النقر على الصورة + في العرض، سينبثق مربع حوار لاختيار الصور تسمية تسمية أولا.

 $(#btnClubImg).click(function() { // TODO Something});

دعونا ننظر إلى الأمر بعد ذلك، لأننا نريد الحصول على الملف الذي تم تحميله، وملفنا موجود بشكل أساسي على الإدخال، لذلك نحصل أولاً على علامة الإدخال:

 $(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload); console.log($input);// اطبع العنصر الحالي});

دعونا نطبع تسمية عنصر الإدخال الحالي لنرى ما هو عليه.

عندما نقوم بتوسيع العنصر الأول، سنجد أن الطول في الملفات هو 0.

حسنًا، لنواصل التحليل، لأننا نريد أن نكون قادرين على الحصول على الملف المحدد حاليًا عندما يتغير مربع الإدخال. وببساطة، عندما يتم تحديد ملف، يمكننا الحصول على الملف المحدد حاليًا إدخال النص في مربع الإدخال لذلك، بعد التحليل، نعلم أننا بحاجة إلى إضافة حدث تغيير إلى علامة الإدخال:

 $(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload); console.log($input); $input.on(change, function () { console.log(this);// اطبع العنصر الحالي الذي تم تغييره});});

دعونا نلقي نظرة ونحصل على ما هو موجود داخل عنصر الإدخال الذي تم تغييره:

يمكن أن نرى بوضوح هنا أننا حصلنا على الصورة المحددة، بما في ذلك حدث التعديل الأخير واسم الصورة وحجمها ونوع الصورة (من خلال نوع الملف، يمكننا الحكم على ما إذا كان المستخدم الحالي قد اختار صورة، أليس كذلك؟ (ابتسامة محدقة) )) مرة أخرى، هذا لملف واحد إذا كان هناك ملفات متعددة، فسيكون هناك ملفات متعددة.

بالنظر إلى الأسفل، يمكننا أن نرى من النسخة المطبوعة أننا حصلنا على معلومات الملف التي نريدها في عنصر الملفات في علامة الإدخال، نحتاج فقط إلى الحصول عليها:

 ملفات var = this.files; var length = files.length;

بهذه الطريقة يمكننا الحصول على جميع الملفات وعدد الملفات، وهنا يأتي السؤال إذا اخترنا ملفات متعددة، فماذا لو قمنا بإخراجها واحدًا تلو الآخر وعرضناها على الصفحة؟ عندما رأيت الكلمات الأربع المذكورة أعلاه، هل ومضت كلمتان في ذهنك؟ دورة

 $.each(files, function (key, value) { // TOTO Something });

من خلال تكرار الملفات التي تم الحصول عليها أعلاه، يمكننا الحصول على معلومات كل ملف على حدة. بهذه الطريقة، لا يمكنك فقط إخراجهم واحدًا تلو الآخر، ولكن إذا أردت، يمكنك أيضًا إرسالهم إلى الجنة ~

 var fileReader = new FileReader();// إنشاء مثيل لكائن FileReader var file_ = files[key];// احصل على الملف الحالي if (/^image///w+$/.test(file_.type)) {// قم بإجراء مطابقة منتظمة على الملف الحالي لمعرفة ما إذا كانت الصورة المحددة fileReader.onload = function() {// يتم الاتصال به عند اكتمال عملية القراءة} }

من الضروري توسيع نقاط المعرفة الخاصة بـ FileReader:

يستخدم FileReader بشكل أساسي لقراءة محتويات الملف في الذاكرة من خلال سلسلة من الواجهات غير المتزامنة، ويمكن الوصول إلى الملفات المحلية في الموضوع الرئيسي.

باستخدام كائنات FileReader، يمكن لتطبيقات الويب قراءة محتويات الملفات (أو مخازن البيانات الأولية المؤقتة) المخزنة على كمبيوتر المستخدم بشكل غير متزامن. ويمكنك استخدام كائنات الملفات أو كائنات Blob لتحديد الملفات أو البيانات المراد معالجتها.

بالعودة إلى الموضوع، لقد تمكنا من الحصول على الملف والحصول على الإرجاع، لذا في هذا الوقت، نحتاج فقط إلى عرض النتيجة التي تم إرجاعها.

$(#clubInputImagePreview).css(background-image, url( + this.result + ));

دعونا نطبع هذه النتيجة لنرى ما هي:

وغني عن القول أن الصورة يتم تحويلها إلى تنسيق بيانات Base64. أخيرًا، نستدعي readAsDataURL لقراءة محتوى الملف وتمثيله كسلسلة data:url.

fileReader.readAsDataURL(value);

بهذه الطريقة، يمكنك الحصول على عرض توضيحي بسيط لتحميل الصور، ولكنه ليس نهائيًا لأنك لا تزال بحاجة إلى إضافة الكثير من الأعمال. على سبيل المثال: بعد الحصول على صورة معاينة، سيتم شغل الملصق الحالي، وإذا قمت بالتكرار في المرة القادمة واستخدمت الملصق الأصلي مباشرةً، فسيتم بالتأكيد استبدال الصورة السابقة، وهذا بالتأكيد ليس التأثير الذي نريده تكون قادرة على عرضه بالتسلسل، بدلا من استبدال العرض. لذلك، لا نزال بحاجة إلى إجراء بعض المعالجة:

 $(#clubInputImagePreview).css(background-image, url( + this.result + ));// استخدم apend لإلحاق عقدة فرعية ضمن العنصر الحالي $(#clubInputImagePreview) .append(<img src='/Images / RegisterNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove' />);// استخدم بعد لإلحاق عقدة شقيقة بالعقدة الشقيقة الحالية $(#clubInputImagePreview).after( <div id='clubInputImagePreview1' class='col-sm-9 img-preview img - Preview-sm delImg' </div>);

ثم عندما نضيف الصورة المحذوفة، نحتاج أيضًا إلى إعطائها حدث نقرة لجعل منطقة المعاينة الحالية تختفي:

 $(#ImgRemove).click(function () { $(this).parent().remove();});

في النهاية، ستجد أن النتيجة ليست ما نريده، وذلك لأن المعرف الحالي لا يزال موجودًا، لذلك لا يمكن تنفيذ الخطوة التالية، نحتاج فقط إلى إزالة معرف العنصر الحالي، ثم إضافة عنصر بنفس المعرف، لذلك سيعتقد المتصفح أن هذا عنصر جديد:

 $input.removeAttr(id); var newInput ='<input type=file Accept=image/* name=ClubImagesUpload id=ClubImagesUpload class=hide multiple=multiple>'; $(this).append($(newInput));

رمز JS الكامل النهائي هو كما يلي:

 var intP = 0; $(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload);// console.log($input); $input.on(change, function () {// console.log(this); var files = this.files; var length = files.length; {}); return } $.each(files, function (key, value) { var fileReader = new FileReader(); var file_ = files[key]; if (/^image///w+$/.test( file_.type)) { fileReader.onload = function() { if (intP > 8) { Layer.msg('لا مزيد من الصور~', {}); if (key == 0 &&; intP == 0) { console.log(this.result); $(#clubInputImagePreview).css(background-image, url( + this.result + )); $(#clubInputImagePreview) .append( <img src=' /Images/registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove' />); $(#clubInputImagePreview).after( <div id='clubInputImagePreview1' class='col-sm-9 img-preview img-preview-sm delImg'></div> }); else { $(#clubInputImagePreview + parseInt(intP) + ).css(background-image, url( + this.result + )); $(#clubInputImagePreview + parseInt(intP) + ).append( <img src='/Images/registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove + parseInt(parseInt( 1) + parseInt(intP)) +' />); $(#clubInputImagePreview + parseInt(intP) + ).after( <div id='clubInputImagePreview + parseInt(parseInt(1) + parseInt(intP)) + 'class='col-sm-9 img-preview img-preview- sm delImg' ></div> } if (key == 0 && intP == 0) { $(#ImgRemove).click(function () { $(this).parent().remove(); }); } else { $(#ImgRemove + parseInt(parseInt(1) + parseInt(intP)) + ) .click(function () { $(this).parent().remove(); } } intP += parseInt(1); fileReader.readAsDataURL(value); else { Layer.msg(خطأ في التنسيق<br/>يرجى تحديد ملف صورة } }); قبول الملف=صورة/* name=ClubImagesUpload id=ClubImagesUpload class=hide multiple=multiple>'; $(this).append($(newInput) });

ما ورد أعلاه هو تطبيق Html5 لوظائف تحميل الصور الفردية والمتعددة التي قدمها المحرر، وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب.