Image Preview File Upload Jquery Code Example

jQuery show image before upload it on the server:Here this article explains how khổng lồ preview an image before uploading it on the server. Let"s suppose you have an application where the user uploads bulk photo and then the users want to lớn upload only some selected photo, in this case, we as a developer don"t want khổng lồ upload all images photos on the server. As this effect on vps load cost effect etc.

Bạn đang xem: Image preview file upload jquery code example

So using HTML 5 FileReader() we can able lớn preview an image before its get uploaded.By this user can view thumbnail photos on the client side và select or choose the photo which he/she wants lớn get upload.

Below I have added detailed code on how to lớn preview image before upload using jQuery & live example.Output:

What is FileReader?

The FileReader object lets web applications asynchronously read the contents of files ( or raw data buffers ) stored on the user"s computer, using file or Blob objects lớn specify the file or data to lớn read, which means that your program will not stall while a tệp tin is being read. This is particularly useful when dealing with large files.

File objects may be obtained from a FileList object returned as a result of a user selecting files using the element, from a drag và drop operation"s DataTransfer object, or from the mozGetAsFile() API on an HTMLCanvasElement.

The following code shows how khổng lồ create a new instance of FileReader.

//*var myReader = new FileReader();//*

FileReader includes 4 options for reading a file:

FileReader.readAsBinaryString(Blob|File) : The result property will contain the file/blob"s data as a binary string. Every byte is represented by an integer in the range <0..255>. FileReader.readAsText(Blob|File, opt_encoding) : The result property will contain the file/blob"s data as a text string. By default, the string is decoded as "UTF-8". Use the optional encoding parameter can specify a different format. FileReader.readAsDataURL(Blob|File) : The result property will contain the file/blob"s data encoded as a data URL. FileReader.readAsArrayBuffer(Blob|File) : The result property will contain the file/blob"s data as an ArrayBuffer object.Once one of these read methods is called on your FileReader object, the onloadstart, onprogress, onload,onabort,onerror, & onloadendcan be used lớn track its progress.
Xem thêm: " Ultra Là Gì - Ultra Hd Là Gì
While for the browsers that tư vấn HTML5 i.e. Mạng internet Explorer 10 và 11+, Mozilla FireFox, Google Chrome và Opera, và so the image preview is displayed using HTML5 FileReader API

# HTML MARKUP:
Here we have added an input file tag and a div tag.This div tag is used as holder where we show our thumbnail image .i.e preview image before uploading it lớn the vps with jQuery example given below.
//*
//*
# jQuery Code: to lớn set preview / thumb image using FileReader():
Here first we bind a change event khổng lồ our input file tag, then will kiểm tra whether the browser supports HTML5 FileReader method, if not then will show alert message .i.e. Your browser is not supported.
//*$("#fileUpload").on("change", function () if (typeof (FileReader) != "undefined") var image_holder = $("#image-holder"); image_holder.empty(); var reader = new FileReader(); reader.onload = function (e) $("", "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 tư vấn FileReader."); );//*View Demo

BONUS -Multiple Image Preview before uploading in jQuery:
We have done with preview image before upload, so let go one step further. Now we are going to show you how khổng lồ select multiple images and preview it before upload .i.e before the image is actually uploaded lớn theserver using jQuery in Asp.net.
Also Read: How to lớn preview videos before uploading on the server
For uploading multiple images, we need to địa chỉ cửa hàng multiple attributes lớn our file đầu vào tag.
# HTML Markup:

# jQuery:Now we store the tệp tin length in a variableand make a For loop over it, to access all the images. Finally, our code for multiple image preview before upload looks lượt thích as shown below.
$("#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 tệp tin selected for uploaded. For (var i = 0; i
View Demo

Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.

PS: If you found this nội dung valuable & want lớn thank me? 👳 Buy Me a Coffee