Heim > Artikel > Web-Frontend > HTML-Auswahlbilder und direkte Vorschau des Implementierungscodes
HTML-Auswahlbilder und direkte Vorschau des Implementierungscodes
- 小云云Original
- 2018-03-05 14:54:013952Durchsuche
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,'photo');" />
<br />
<br />
<img id="photo" src="" width="300px" height="300px" style="display: block;" />
</form>
</p>
</body>
</html>Verwandte Empfehlungen:
Eingabetyp=Datei Ausführliche Erklärung zur Auswahl von Bildern und zum Erreichen von Vorschaueffekten
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!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Verwendung des Formular-Tags in HTML5Nächster Artikel：Detaillierte Erläuterung der Verwendung des Formular-Tags in HTML5