getAsDataURL()在chrome和ie中不起作用

Question

这是我的HTML:

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

我的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();
    }

我有两个问题:

1. onclick在Chrome和Chrome中不起作用

2. getAsDataURL()在Chrome和IE中不起作用

你能帮助我吗？

Answer 1

IE尚不支持File API.无论如何,你需要使用a FileReader来读取文件.此外,该文件不是它的文件名(您的变量命名有点模棱两可).

点击委派到文件输入工作正常.

http://jsfiddle.net/fKQDL/

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