小编Hem*_*lla的帖子

如何预览上传的图像作为div的背景图像？

我想在div中预览上传的图像文件.我做了一些研究,我从这篇文章中找到了这段代码,它是预览上传图像文件的<img>代码,但是在标签中:

<script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }
</script>

Run Code Online (Sandbox Code Playgroud)

相关的HTML:

<body>
    <form id="form1" runat="server">
        <input type='file' onchange="readURL(this);" />
        <img id="blah" src="#" alt="your image" />
    </form>
</body>

Run Code Online (Sandbox Code Playgroud)

很酷.但是,我想要的是将上传的图像显示为div的背景图像,其示例如下:

<div class="image" style="background-image:url('');"></div>

我知道,从逻辑上讲,我必须更换

$('#blah').attr('src', e.target.result);

喜欢的东西

$('div.image').attr('style', e.target.result);.

但是如何使图像的路径进入"背景图像"属性的值？

是的,我需要链接到JQuery库吗？

谢谢.

javascript upload jquery image

Hem*_*lla