Question

上传之前预览图片 - 不起作用

2016-02-16

1509

javascript jquery file-upload upload

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

我尝试了很多方法，比如这个。

图片预览不起作用。

我不知道我哪里犯了错误。我试过 https://jsfiddle.net/lesson8/9NeXg/ ，我已经粘贴了我的代码。

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

   <!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

您的 js 在 DOM 准备就绪之前就已运行。您必须将 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 拆分为单独的文件。

很高兴您的问题已解决 :)。