در این مقاله، نحوه پیش نمایش عکس را قبل از آپلود کردن روی سرور در jQuery، آموزش می دهیم.

فرض کنید شما وب سایتی دارید که کاربران، تعدادی عکس را آپلود می کنند و سپس تنها تعدادی از آنها را برای آپلود انتخاب می کنند، در این مورد، ما به عنوان یک برنامه نویس نمی خواهیم تمام عکس ها روی سرور آپلود شود.

با استفاده از()HTML5 FileReader می توانیم، عکس ها را قبل از آپلود در jQuery، پیش نمایش کنیم.

به این ترتیب، کاربر می تواند عکس های Thumbnailرا در سمت کلاینت مشاهده کند(قبل از آپلود کردن در سمت سرور) و عکس هایی را که می خواهد، برای آپلود انتخاب کند.

در ادامه با یک مثال آن را توضیح می دهیم:

FileReader چیست؟

شیء FileReader به برنامه های کاربردی این امکان را می دهد که با استفاده از اشیای file و Blob، فایل یا داده ای که باید بخواند را مشخص کند و محتوای فایل(یا بافر داده های خام) که در کامپیوتر کاربر ذخیره شده را به طور نامتقارن بخواند، به این معنی که زمانی که فایلی خوانده می شود برنامه به کار خود ادامه می دهد. این مسئله، مخصوصا زمانی که با فایل های بزرگ و با حجم زیاد کار می کنیم، بسیار مفید است.

اشیای file، ممکن است از خروجی برگردانده شده FileList به دست بیاید که به عنوان نتیجه انتخاب کردن فایل ها توسط کاربر با استفاده از المنت Input می باشد، یا عمل Drag and Drop شیء DataTransfer و یا از  ()mozGetAsFile روی یک تگ canvas در HTML.

کد زیر، ساختن یک نمونه از FileReader را نشان می دهد:

var myReader = new FileReader();

FileReader، چهار گزینه برای خواندن فایل دارد:

1. FileReader.readAsBinaryString(Blob|file): خروجی آن به شکل Property خواهد بود که شامل داده های Blob/File به صورت رشته باینری است. هر بایت به صورت یک Integer در بازه (0،255) نشان داده می شود.

2. (Blob|File,opt_encoding)FileReader.readAsText: خروجی آن به شکل Property خواهد بود که شامل داده های Blob/File به صورت رشته متنی است. به صورت پیش فرض، رشته به UTF-8 کدگشایی می شود. استفاده از پارامترهای کدگذاری، فرمت های مختلفی را مشخص می کند.

3. (Blob|File)FileReader.readAsDataURL: خروجی آن به شکل Property خواهد بود که شامل داده های Blob/File است که به صورت دادهای URL کد شده اند.

4. (Blob|File)FileReader.readAsArrayBuffer: خروجی آن به شکل Property خواهد بود که شامل داده های Blob/File به صورت شیء ArrayBuffer است.

زمانی که هر یک از این متدهای read، در شیء FileReader فراخوانی شود، onloadstart، onprogress، onload، onabort، onerror و onloadend برای دنبال کردن روند پیشرفت برنامه، می توانند استفاده شوند.

مرورگرهایی که از HTML5 پشتیبانی می کنند، با استفاده از HTML5 FileReader API پیش نمایش عکس را نمایش می دهند.

HTML:

در اینجا، یک تگ Input از نوع File و یک تگ div اضافه می کنیم. این تگ Div فضایی است که می خواهیم عکس را قبل از آپلود نمایش دهیم. کد زیر این دو المنت را برای ما می سازد:

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

کد jquery برای پیش نمایش عکس با استفاده از FileReader:

در اینجا، ابتدا رویداد 'change'  را به المنت Input متصل (Bind) می کنیم. سپس چک می کند که آیا مرورگر شما از HTML 5 FileReader پشتیبانی می کند، اگر مرورگر از  FileReader پشتیبانی نکند، پیامی با متن:" مرورگر شما پشتیبانی نمی شود" به کاربر نمایش می دهد.

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

        if (typeof (FileReader) != "undefined") {

            var image_holder = $("#image-holder");
            image_holder.empty();

            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[0]);
        } else {
            alert("This browser does not support FileReader.");
        }
    });

خروجی: 

به این ترتیب، ما یک عکس را پیش از آپلود نمایش دادیم.

پیش نمایش چندین فایل به طور همزمان، پیش از آپلود:

تا  اینجا، ما توانستیم با jQuery یک عکس را قبل از آپلود نمایش دهیم. حال، یک مرحله جلوتر می رویم و می خواهیم نشان دهیم که چگونه می توان چند عکس را انتنخاب کرد و قبل از آپلود پیش نمایش نمود. 

برای آپلود چند فایل به طور همزمان، نیاز داریم که صفت multiple را به تگ Input اضافه کنیم. 

HTML:

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

jQuery:

حال، تعداد عکس ها را در یک متغیر ذخیره کرده و یک حلقه For به تعداد آن برای گرفتن تمام عکس ها ایجاد می کنیم. درنهایت، کد ما برای آپلود چندین فایل به شکل زیر در می آید:

 $("#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");
     }
});