7

我想在 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>

相关的 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 库吗？

谢谢你。

4

1 回答 1

15

您可以像在 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');
于 2013-05-01T05:03:52.273 回答