0

我见过几种显示图像预览的方法，但它们似乎都不起作用，或者它们只在 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显示正确的本地图像路径但预览永远不会出现时。为什么以及如何让它工作（在所有浏览器中）？

谢谢。

4

1 回答 1

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>
于 2012-08-03T20:26:22.593 回答