Heim > Artikel > Web-Frontend > Verwenden Sie jQuery, um Bilder beim Hochladen lokal in der Vorschau anzuzeigen
Verwenden Sie jQuery, um Bilder beim Hochladen lokal in der Vorschau anzuzeigen
- php中世界最好的语言Original
- 2018-05-03 09:12:531337Durchsuche
Dieses Mal werde ich Ihnen die lokale Vorschau beim Hochladen von Bildern mit jQuery zeigen. Die folgenden sind praktische Fälle, schauen wir uns das an. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> jquery上传图片本地预览效果</title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<input id="upload" type="file">
<img id="preview" src="">
<script type="text/javascript">
$('#upload').change(function(){
// 获取FileList的第一个元素
alert(document.getElementById('upload').files[0]);
var f = document.getElementById('upload').files[0];
src = window.URL.createObjectURL(f);
document.getElementById('preview').src = src
})
</script>
</body>
</html>Wirkungseffekt:
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Achten Sie auf weitere spannende Artikel auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Methoden für die Element-UI-Steuerung zum Betreiben von iviewWelche Methoden gibt es für übergeordnete Vue-Komponenten zum Aufrufen von Sub? -KomponentenSo verwenden Sie den Diff-AlgorithmusDas obige ist der detaillierte Inhalt vonVerwenden Sie jQuery, um Bilder beim Hochladen lokal in der Vorschau anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!