数据URI在CSS中不起作用

时间:2012-08-03 18:46:58

标签: javascript css filereader

我有这个fileReader代码

for (var i = 0; i < files.length; i++) {
    fileReader.onload = (function(file) {
        return function(e) {
            z = z + 40;
            // Place the image inside the dropzone
            var image = this.result;
            $('#dropped-files').append('<div style="left: ' + z + 'px; background: url(' + image + ') cover;"> </div>');

        };
    })(files[i]);
}​

无论如何,我正在尝试将附加框的背景设置为刚刚上传的图像。问题是它无法正常工作。数据URI在那里,但我似乎无法让它显示为背景!即使我单击inspect元素中的数据URI链接,我也可以访问上传的图像,但它不会显示为背景图像。

任何想法为什么?数据URI非常长,但从基本数据开始,如果有帮助,则为base64。

1 个答案:

答案 0 :(得分:1)

尝试删除背景值末尾的cover。我不知道你要做什么,但是添加它会让Chrome扯下来并说它不是有效的属性值。

编辑: 相反,请进行2次声明:

$('#dropped-files').append('<div style="left: ' + z + 'px; background: url(' + image + '); background-size: cover;"> </div>');