javascript - 数据 URI 在 CSS 中不起作用

标签 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 在那里,但我似乎无法将其显示为背景!即使在检查元素中单击数据 URI 链接时,我也可以找到已上传的图像,但它不会显示为背景图像。

有什么想法吗?数据 URI 非常长,但以基本数据开头并且是 base64,如果有帮助的话。

最佳答案

尝试删除背景值末尾的 cover。我不知道您要做什么,但添加它会使 Chrome 举手并说它不是有效的属性值。

编辑: 相反,做出 2 个声明:

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

关于javascript - 数据 URI 在 CSS 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11801563/

相关文章:

html - 我的 CSS 更改根本不会以任何方式影响我的网页

javascript - 在 javascript ArrayBuffer 中访问 Uint8Array

javascript - 我如何在 html 中创建一个绝对定位的 div,它会将其他元素推到一边,就像在 Apple 的页面中一样?

javascript - 从一组 float 元素中计算出行中的最后一个 div

javascript - 在node.js中通过http.ClientRequest实现接口(interface)是什么意思?

html - 如何使 Twitter Bootstrap Navbar 透明?

javascript - 使用文件读取器获取图像的宽度和高度

java - 使用 FileReader 类从 Java 位置读取文件

javascript - 使用动态 URL 创建动态数量的按钮

javascript - 在 Angular.js 中有条件地显示链接