Uploading and Displaying an Image from a File Using HTML5 and JavaScript

The JavaScript code included below uses the FileReader feature of the File API to allow the user to choose an image file from the local computer’s filesystem and display that image in the browser.


<script type='text/javascript'>

function main()
    var inputFileToLoad = document.createElement("input");
    inputFileToLoad.type = "file";
    inputFileToLoad.id = "inputFileToLoad";

    var buttonLoadFile = document.createElement("button");
    buttonLoadFile.onclick = loadImageFileAsURL;
    buttonLoadFile.textContent = "Load Selected File";

function loadImageFileAsURL()
    var filesSelected = document.getElementById("inputFileToLoad").files;
    if (filesSelected.length > 0)
        var fileToLoad = filesSelected[0];

        if (fileToLoad.type.match("image.*"))
            var fileReader = new FileReader();
            fileReader.onload = function(fileLoadedEvent) 
                var imageLoaded = document.createElement("img");
                imageLoaded.src = fileLoadedEvent.target.result;



This entry was posted in Uncategorized and tagged , , , . Bookmark the permalink.

14 Responses to Uploading and Displaying an Image from a File Using HTML5 and JavaScript

  1. edward says:

    awesome ! thanks you bro. long live

  2. ram says:

    its amazng…)):

  3. vishesh kaul says:

    really nice, but how could i save this image on server side, pls help

  4. harish says:

    yeah it’s working………..
    thank u

  5. ArouG says:

    Very good ! Simply but efficient : i was searching for this little lines😉 Thanks a lot !

  6. arif says:

    Thanks u..but how to delete image ?

    • Well, in this context, since the image data is all stored in the src attribute of an img element appended to the page’s body element, you could probably just call document.body.removeChild() and pass it the img element. You’ll need to get the element somehow first, maybe by assigning it an ID and calling document.getElementById() against it.

  7. ashok says:

    Yeah it working….Nice…thank you…

  8. Alexander says:

    Beautifull THX alooot

  9. manikandan says:

    Nice…thank you….

  10. aarthi says:

    Is it possible to invoke file upload on clicking ‘Load Selected File’.
    I just want to have one button ‘Upload Image’, on clicking this, selected file should be displayed
    (Choose File should be omitted)

    • hafsasaad says:

      i want same😦

      • To be honest, I was never quite sure what aarthi was asking for, which is why I didn’t respond.

        But it sounds like you only want one button. You might be able to do that by getting rid of the “Load Selected File” button entirely and assigning the loadImageFileAsURL function to the onchange event of the upload control (that is, the “Choose File” button) instead. But you’ll still need to choose a file to upload. I don’t think there’s any way to get around that. Good luck!

  11. siva says:

    when upload image, image name is too long as a small name
    for ex: upload image name : aaaaaaaaaaaaaaaaaaaaaaa.jpg
    when upload image i want to display image name as like this : aaaa…jpg
    please help me how to is …….

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s