如何在 html 和 javascript 中显示用户上传的照片答案

【问题标题】：How to display a photo uploaded by user in html and javascript如何在 html 和 javascript 中显示用户上传的照片
【发布时间】：2018-10-01 05:28:44
【问题描述】：

我想知道如何显示用户使用 html 和 javascript 在网站上上传的照片。我尝试使用在另一个 stackoverflow 问题上找到的代码，但它对我不起作用。这是我在 chrome、firefox 和 safari 中尝试过的代码。任何帮助表示赞赏

HTML：

<!DOCTYPE html>
<html>
<head>
    <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
    <meta charset=utf-8 />
    <title>JS Bin</title>
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
    article, aside, figure, footer, header, hgroup,menu, nav, section {
        display: block;
    }
    </style>
</head>
<body>
    <input type='file' onchange="readURL(this);" />
    <img id="blah" src="#" alt="your image" />
</body>
</html>

Javascript：

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

【问题讨论】：

代码工作正常，但是你有一个小问题使它无法工作。很容易看出你是否调试了你的代码。
打开控制台看看动作有没有报错
感谢您的反馈

标签： javascript html display photo-upload

【解决方案1】：

您可以简单地使用纯 JS 来完成这项工作。

function handleImageUpload() 
{

var image = document.getElementById("upload").files[0];

    var reader = new FileReader();

    reader.onload = function(e) {
      document.getElementById("display-image").src = e.target.result;
    }

    reader.readAsDataURL(image);

}

<input id="upload" type="file" onChange="handleImageUpload()" />
<img id="display-image" src="" />

【讨论】：

【解决方案2】：

请检查下面的代码 sn-p，我已经在 Google chrome 版本 66.0.3359.117 (Official Build) (64-bit) 上进行了测试，它工作正常。

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

<!DOCTYPE html>
<html>

<head>
    
    <meta charset=utf-8 />
    <title>JS Bin</title>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
    <!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
    <style>
        article,
        aside,
        figure,
        footer,
        header,
        hgroup,
        menu,
        nav,
        section {
            display: block;
        }

    </style>
</head>

<body>
    <input type='file' onchange="readURL(this);" />
    <img id="blah" src="#" alt="your image" />
</body>

</html>

【讨论】：

【解决方案3】：

你的代码运行良好，我已经测试过了。

我认为您忘记将 javascript 链接到您的 HTML 源代码。

【讨论】：