有没有办法用输入文件临时图像更改<span>背景图像？</span>

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访问本地文件系统。这将允许您加载图像并显示它（示例专门列出了这个用例）。