Home > Article > Web Front-end > HTML select pictures and directly preview the implementation code

HTML select pictures and directly preview the implementation code

小云云Original: 2018-03-05 14:54:013948browse

This article mainly shares with you the implementation code of selecting images in HTML and previewing them directly. I hope you can use the code in this article to achieve the effect of selecting images in HTML and previewing them directly.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>选择图片并预览</title>

    <script type="text/javascript">
        function getFileUrl(sourceId) {
            var url;
            if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
                url = document.getElementById(sourceId).value;
            } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
                url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
            } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
                url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
            }
            return url;
        }
        function preImg(sourceId, targetId) {
            var url = getFileUrl(sourceId);
            var imgPre = document.getElementById(targetId);
            imgPre.src = url;
        }
    </script>

</head>
<body>
<p>
    <br />
    <br />
    <a>上传者：<input type="text" /></a>
    <br />
    <br />
    <form action="">
        <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,&#39;photo&#39;);" />
        <br />
        <br />
        <img id="photo" src="" width="300px" height="300px" style="display: block;" />
    </form>
</p>
</body>
</html>

The above is the detailed content of HTML select pictures and directly preview the implementation code. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of the usage of form tag in HTML5Next article：Detailed explanation of the usage of form tag in HTML5

See more

HTML select pictures and directly preview the implementation code

Related articles