HTML-Auswahlbilder und direkte Vorschau des Implementierungscodes-HTML-Tutorial-php.cn

HTML-Auswahlbilder und direkte Vorschau des Implementierungscodes

小云云

Freigeben： 2018-03-05 14:54:01

Original

3948 Leute haben es durchsucht

In diesem Artikel erfahren Sie hauptsächlich, wie Sie Bilder in HTML auswählen und direkt in der Vorschau anzeigen. Ich hoffe, Sie können den Code in diesem Artikel verwenden, um den Effekt der Auswahl von Bildern in HTML und der direkten Vorschau zu erzielen.

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonHTML-Auswahlbilder und direkte Vorschau des Implementierungscodes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!