Display Images and its name, size before uploading to server by using FileReader - JavaScript File API

If you look at my previous post Single File Upload to Multiple File Upload, it display size of the file after upload.

Here is the code I was using there.

protected void btnUpload_Click(object sender, EventArgs e)
        foreach(var file in FileUpload1.PostedFiles)
            //upload logic
            Response.Write(file.FileName + " - " + file.ContentLength + " Bytes. <br />");

Now, I want to do this client side and without even uploading. This will increase the performance benefits dramatically. Look at the animated image blow in action.

Notice before clicking button it displays size as well as images on the DOM (no server involved) and after clicking button it displays size which is returned from server.

I want to create a web page that allow users to upload image files. I also want to display the images user has selected, with image name and size.

To display images user has selected on the DOM without any server round trip, I can take the power of FileReader which is HTML5 JavaScript File API specification.

So, we are going to develop a web page that will display images (multiple files) selected by ASP.NET FileUpload control. You should read my previous post Single File Upload to Multiple File Upload before proceeding here. Because I am going to reuse same code here.

Here is my HTML Markup.

<asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="true"/>
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click"/>
<br />
<output id="filesSize"></output>
<br />
<output id="images"></output>

We got several things here:

i. A FileUpload control with AllowMultiple="true".
ii. A button that will execute server side action to upload file to server.
iii. Two output tags. First will display the select files size and second will display selected images.

Now, let’s do JavaScript part to display size and selected images.

<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
    function showimages(files) {
        for (var i = 0, f; f = files[i]; i++) {
            $('#filesSize').append(f.name + ' - ' + f.size + '<br />');
            var reader = new FileReader();
            reader.onload = function (evt) {
                var img = '<img src="' + evt.target.result + '"/>';

    $('#FileUpload1').change(function (evt) {

First we placed a reference of jQuery library and then we created showimages(files) function. This function is being called from ('#FileUpload1').change event.

In the showimages(files) function, we are looping through the list of posted files and then using FileReader we are building img tag and appending in output tag.

Hope this helps.


  1. hi sir
    i am making employee profile i want to upload image when employee Login his username and password after that it should be show his image only profile . how to do in javascript

  2. hi

    i got error
    above code is applied


    CS1061: 'System.Web.UI.WebControls.FileUpload' does not contain a definition for 'HasFiles' and no extension method 'HasFiles' accepting a first argument of type 'System.Web.UI.WebControls.FileUpload' could be found (are you missing a using directive or an assembly reference?)

    i change like

    protected void btn1_Click(object sender, EventArgs e)
    if (upload1.HasFile)
    foreach (var file in upload1.PostedFile)
    //upload logic

    Response.Write(file.FileName + " - " + file.ContentLength + " Bytes.

    this time i got this error

    CS1579: foreach statement cannot operate on variables of type 'System.Web.HttpPostedFile' because 'System.Web.HttpPostedFile' does not contain a public definition for 'GetEnumerator'

  3. change event of file upload is not working..


Post a Comment

Popular posts from this blog

Customize User's Profile in ASP.NET Identity System

Migrating database from ASP.NET Identity to ASP.NET Core Identity