javascript - getAsDataURL() doesn't work in chrome and ie - Stack Overflow

admin管理员组

文章数量:1026373

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?

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?

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Nov 8, 2011 at 13:38 Some Guy 16.2k1010 gold badges6060 silver badges6868 bronze badges asked Nov 8, 2011 at 12:57 Aram MkrtchyanAram Mkrtchyan 2,70044 gold badges3535 silver badges4848 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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/fKQDL/

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

Bind the button's behavior with jQuery

jQuery('input[type="button"].unknown').click ( onbrowse );

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?

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?

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Nov 8, 2011 at 13:38 Some Guy 16.2k1010 gold badges6060 silver badges6868 bronze badges asked Nov 8, 2011 at 12:57 Aram MkrtchyanAram Mkrtchyan 2,70044 gold badges3535 silver badges4848 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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/fKQDL/

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

Bind the button's behavior with jQuery

jQuery('input[type="button"].unknown').click ( onbrowse );

本文标签： javascriptgetAsDataURL() doesn39t work in chrome and ieStack Overflow