在上传之前预览图像 - 不工作答案

【问题标题】：Preview an image before it is uploaded - Not Woking在上传之前预览图像 - 不工作
【发布时间】：2016-05-27 08:36:51
【问题描述】：

我想在上传之前预览一张图片。

我试过很多方法，比如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>

【问题讨论】：

好吧，小提琴对我来说很好用，到底什么对你不起作用？发生什么了？你检查过控制台吗？
@Fearodin 我已将 fiddle 复制到我的页面，这只是我所做的，但它不起作用。我已经写了我的代码。你能试试吗？

标签： javascript jquery file-upload upload

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

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

这应该可以解决您的问题。

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

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

【讨论】：