小编RBk*_*RBk的帖子

如何从计算机上传图像文件并使用jQuery设置为div背景图像?

图像文件输入的HTML代码:

<input type="file" autocomplete="off" name="background-image" accept="image/*" />
Run Code Online (Sandbox Code Playgroud)

我想要动态设置背景图像的目标div块:

<div class="clock"></div>
Run Code Online (Sandbox Code Playgroud)

我正在使用的jQuery函数用于设置上传为div背景图像的图像文件:

$(".background>div>input[type=file]").change(function () {
    var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
    if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
        alert("Only '.jpeg','.jpg', '.png', '.gif', '.bmp' formats are allowed.");
    }
    else {
        $(".clock").css("background-image",'url("' + $(".background>div>input[type=file]").val() + '")');
    }
});
Run Code Online (Sandbox Code Playgroud)

问题是没有设置背景图像.这可能是因为当我使用浏览器检查器检查时,文件上载不包含文件URL. 注意: .clock的背景颜色最初设置为白色.我也不想使用服务器,因为我的目的是将其保留为仅客户端应用程序.

html javascript css jquery

11
推荐指数
2
解决办法
3万
查看次数

标签 统计

css ×1

html ×1

javascript ×1

jquery ×1