Question

我想在div中预览上传的图像文件。我做了一些研究，我从this post找到了这段代码，它是预览上传图像文件的代码，但是在<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>

关联的HTML：

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

非常酷。但是，我想要的是将上传的图像显示为div的背景图像，其示例如下：

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

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

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

类似

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

但是如何使图像的路径进入'background-image'属性的值？

是的，我是否需要链接到JQuery库？

谢谢。

Answer 1

您可以像在CSS文件中一样使用CSS简写。我建议以下内容以避免重复和对齐问题：

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

            reader.onload = function (e) {
                $('#objectID').css('background', 'transparent url('+e.target.result +') left top no-repeat');
            }

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

更改是这样的行

$('#objectID').css('background', 'transparent url('+e.target.result +') left top no-repeat');

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

1 个答案: