javascript - 有没有办法用输入文件临时图像更改 背景图像？

Question

我有一个具有默认背景图像的跨度，它填充的是 .选择文件后，我想将跨度的背景更改为所选图像。这可能吗？

我有 HTML:

<div class="one">
    <span class="two upload_image"></span>
    <input id="input_file" class="three" type="file" name="e_picture" accept="image/*">
</div>

My Current Js(将 upload_image 类的 src 更改为选定的图像，而不是选定的图像:

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('.upload_image').css('background-image', 'url("http://www.thechefsdirectory.com/x/x_images/x_template/form/upload_document.png")');
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#input_file").change(function(){
    readURL(this);
});

这是输入的样子:

完美的场景。用户点击输入并选择要上传的文件。

然后背景从默认的 css 背景变为临时预览。

然后，如果用户再次单击该文件，他们可以更改图像。

谁能提供解决方案？

Answer 1

是的，通过使用 File API .

简而言之，File API 允许浏览器中的 JavaScript 访问本地文件系统。这将允许您加载图像并显示它(示例专门列出了这个用例)。