Question

我想在上传图片前预览图片。

我尝试了许多方法，例如this。

图像预览不起作用。

我不知道我在哪里犯了错误。我尝试了https://jsfiddle.net/lesson8/9NeXg/并粘贴了我的代码。

注意：小提琴工作正常，但是当我将小提琴复制到我的页面时它不起作用。我不知道我的错误是什么。

   <!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<title>Untitled Document</title>
<script>
function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#image_upload_preview').attr('src', e.target.result);
            }

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

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

<body>
   <form id="form1" runat="server">
    <input type='file' id="inputFile" />
    <img id="image_upload_preview" src="http://placehold.it/100x100" alt="your image" />
  </form>
</body>
</html>

Answer 1

好的，解决方案就是将您的脚本代码从<head>添加到<body>标记，如下所示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<title>Untitled Document</title>
</head>

<body>
   <form id="form1" runat="server">
    <input type='file' id="inputFile" />
    <img id="image_upload_preview" src="http://placehold.it/100x100" alt="your image" />
  </form>
<script>
function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#image_upload_preview').attr('src', e.target.result);
            }

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

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

Answer 2

在DOM准备好之前，您的js正在运行。您必须将js放入$(document).ready()。

<html>
<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <title>Untitled Document</title>
    <script>
        $(document).ready(function () {
            function readURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        $('#image_upload_preview').attr('src', e.target.result);
                    }

                    reader.readAsDataURL(input.files[0]);
                }
            }

            $("#inputFile").change(function () {
                readURL(this);
            });
        });
    </script>
</head>

<body>
    <form id="form1" runat="server">
        <input type='file' id="inputFile" />
        <img id="image_upload_preview" src="http://placehold.it/100x100" alt="your image" />
    </form>
</body>
</html>

Answer 3

将jQuery代码放在$（document）.ready（function（）{/ * Here。* /}）中，创建一个单独的JS文件，并将此JS文件包含在：

<head>
  <script type="text/javascript" src="test.js"></script>
</head>

这可以解决您的问题。

对于快速的小原型，将JS直接放入HTML中是很好的，但除了快速测试用例之外，通常建议将JS拆分为单独的文件。

很高兴您的问题得到解决：）。

在上传图片之前预览图片 - 不是Woking

3 个答案: