Heim >Web-Frontend >js-Tutorial >Detailliertes Beispiel für die einfache Bildvorschaufunktion von js
Detailliertes Beispiel für die einfache Bildvorschaufunktion von js
- coldplay.xixinach vorne
- 2020-06-13 17:28:472410Durchsuche
js einfache Bildvorschau-Funktion hochladen – einfach und grob
js einfache Bildvorschau-Funktion hochladen
<!DOCTYPE html>
<html>
<head>
<title>js简单上传图片预览功能</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
</head>
<body>
<h3>请选择图片文件：JPG/GIF</h3>
<form name="form0" id="form0" >
<input type="file" name="file0" id="file0" multiple="multiple" />
<br>
<img src="" id="img0" width="150" height="150" style="display:none;">
</form>
</body>
</html>
<script type="text/javascript">
$("#file0").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
console.log("objUrl = "+objUrl) ;
if (objUrl) {
$("#img0").attr("src", objUrl) ;
$("#img0").show();
}
}) ;
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
</script>Empfohlenes Tutorial: " JS-Grundlagen-Tutorial》
Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die einfache Bildvorschaufunktion von js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Dieser Artikel ist reproduziert unter:liqingbo.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Detaillierte Erklärung der Generierung von Zufallszahlen durch JSNächster Artikel：Detaillierte Erklärung der Generierung von Zufallszahlen durch JS