Question

我找到了一个jquery脚本，可以让你在上传之前预览图像。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
 function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();            
            reader.onload = function (e) {
                $('#target').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp").change(function(){
        readURL(this);
    });
</script>
</head>
<body>

<h1>jQuery Uploads</h1>

    <form id="form1" runat="server">
        <input type="file" id="imgInp" />
        <img id="target" src="#" alt="your image" />
    </form>

</body>
</html>

我在jsfiddle上发现它并且工作正常。但是现在我尝试在我的服务器上运行它并且它不起作用。我似乎无法弄清楚为什么它不起作用。有人有什么想法吗？

Answer 1

我可以在这里发生不同的事情。我的第一个猜测是，javascript加载的时间问题。尝试将jQuery监听器抛入“就绪”调用。

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();            
        reader.onload = function (e) {
            $('#target').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}
$(function(){
    $("#imgInp").change(function(){
        readURL(this);
    });
})

另外 - 确保你的协议（http vs https）与你的code.jquery.com

相匹配

jquery上传和查看图像

1 个答案: