Question

This is my HTML:

<input type="file" id="browse" name="browse" size=""  placeholder="Photo" checked="checked" class="upload"/>
<input type="button" onclick="javascript:onbrowse()"  class="unknown" value=""/>

And my JavaScript:

$(function() {
        $(".upload").change(function () {
            var fileObj = $(this).get(0);
            var fileName;
            if (fileObj.files) {
                fileName = fileObj.files.item(0).getAsDataURL()
            } else {
                fileName = fileObj.value;
            }
            $(".unknown").css("background-size", "100px 100px");
            $(".unknown").css("background-image", "url(" + fileName + ")");
        });
    });

    function onbrowse() {
        document.getElementById('browse').click();
    }

I have two problems:

1. onclick doesn’t work in Chrome and

2. getAsDataURL() doesn’t work in Chrome and IE

Can you help me?

Answer 1

IE does not yet support the File API. Anyhow, you need to use a FileReader to read a file. Also, the file is not its file name (your variable naming is a little ambiguous).

The click delegation to the file input works just fine.

http://jsfiddle.net/fKQDL/

file = fileObj.files[0];
var fr = new FileReader;
fr.onloadend = changeimg;
fr.readAsDataURL(file);