Question

我已经看过几种显示图像预览的方法，但它们似乎都不起作用，或者它们只适用于FF / Chrome。

尽量保持简单：

标记：

<input type="file" id="logo-upload" onchange="changePreview();"/>
<br/>        
<img src='@Url.Image("logo.png")' alt="Preview" id="logo-preview"/>

使用Javascript：

<script type="text/javascript">

    function changePreview() {

        var input = $('#logo-upload').val();

         $('#logo-preview').attr('src', input)
                    .width(150)
                    .height(50);
         }

</script>

当调试input显示正确的本地图像路径但预览从未显示时。为什么以及如何使其工作（在所有浏览器中）？

感谢。

Answer 1

尝试设置$('#logo-upload').change(function(){})而不是使用onChange。我认为这是一个好的开始。然后将jQuery放在$(document).ready(function(){})中。如果您在页面上存在元素之前设置脚本，那么这可能是另一个问题。

如果你可以发布更多代码，那将是有益的。

此外，对于IE，您将遇到用户无法控制的权限问题（至少在这种情况下）。因此，在这些情况下，您必须首先上传图像，从服务器获取图像，或者他们必须更改其安全设置以允许访问此类内容。

<input type="file" id="logo-upload" />
<br/>        
<img src="@Url.Image('logo.png')" alt="Preview" id="logo-preview"/>

<script type="text/javascript">
    $(document).ready(function() {
        $('#logo-upload').change(function() {
            var input = $(this).val();
            $('#logo-preview').attr('src', input).width(150).height(50);
        })
    });
</script>

JQuery Image Preview无法正常工作

1 个答案: