[Html5] عرض معاينة صورة قبل التحميل


Answers

هنا فعلت مع مسج باستخدام فليريدر أبي.

ترميز هتمل:

<input id="fileUpload" type="file" multiple />
<div id="image-holder"></div>

مسج:

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

$("#fileUpload").on('change', function () {

     //Get count of selected files
     var countFiles = $(this)[0].files.length;

     var imgPath = $(this)[0].value;
     var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
     var image_holder = $("#image-holder");
     image_holder.empty();

     if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
         if (typeof (FileReader) != "undefined") {

             //loop for each file selected for uploaded.
             for (var i = 0; i < countFiles; i++) {

                 var reader = new FileReader();
                 reader.onload = function (e) {
                     $("<img />", {
                         "src": e.target.result,
                             "class": "thumb-image"
                     }).appendTo(image_holder);
                 }

                 image_holder.show();
                 reader.readAsDataURL($(this)[0].files[i]);
             }

         } else {
             alert("This browser does not support FileReader.");
         }
     } else {
         alert("Pls select only images");
     }
 });

المادة التفصيلية: كيفية معاينة الصورة قبل تحميله، مسج، HTML5 فليريدر () مع عرض حي

Question

في نموذج هتمل لدي الإدخال المقدم مع ملف نوع على سبيل المثال:

 <input type="file" multiple>

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