上传前预览图像 - 不工作

Question

我想在上传图片之前进行预览。

我试过很多方法，比如this。

图片预览不工作。

我不知道我哪里做错了。我尝试了 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

在 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 拆分成单独的文件。

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

上传前预览图像 - 不工作

Preview an image before it is uploaded - Not Woking

javascript

upload

jquery

file-upload