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)

{

    if(FileUpload1.HasFiles)

    {

        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 + '"/>';

                $('#images').append(img);

            }

            reader.readAsDataURL(f);

        }

    }

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

        showimages(evt.target.files);

    });

</script>

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.