How to extract data url of image from html5 file upload

Question

I'm currently creating an upload app and I want the images to show up in the browser before the user uploads it. I'm having a problem with getting the images to work though. I can render the file name, last modified but I can't for the life of me get the dataurl to work.

Here is my rendering script. This script basically loads a page and should render the image in the loaded div. But right now, I can only render the name of the file. I would really appreciate it if you guys can help me out. I've already spent 2 days trying to get this work to no avail.

$('#MainPageUploadFormFile').change(function(){
    $('#MainPageContainer').fadeOut()
     .load('AlbumEdit').hide()
     .slideDown();

    var img = document.getElementById('MainPageUploadFormFile');

    setTimeout(function(){
        //    $('#PictureColumn ul').append('<li>' + name + '</li>');
        for (var i = 0; i < img.files.length; ++i) {
            var name = img.files.item(i).name;
            $('#PictureColumn ul').append('<li>' + name + '</li>');
        }
    },100);
});

score 0 · Answer 1 · edited May 23 '17 at 12:21

0

Are you simply trying to see a picture you've selected before upload happens?

Preview an image before it is uploaded

edited May 23 '17 at 12:21

Community

1
1

answered Jun 07 '12 at 23:46

Nick

390
2
12

How to extract data url of image from html5 file upload

1 Answers1