Heim > Artikel > Web-Frontend > jQuery HTML5 implementiert den Bildvorschaueffekt vor dem Upload_jquery

jQuery HTML5 implementiert den Bildvorschaueffekt vor dem Upload_jquery

WBOYOriginal: 2016-05-16 15:43:531947Durchsuche

Das Beispiel in diesem Artikel beschreibt die jQuery HTML5-Implementierung der Bildvorschau vor dem Hochladen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier verwenden wir hauptsächlich die Datei-API von HTML5, um eine URL zu erstellen, die auf die Datei zugreifen kann, ein leeres IMG-Tag mit der ID img0 und die ausgewählte Datei im IMG-Tag anzuzeigen, um die Bildvorschaufunktion zu implementieren. Bitte wählen Sie einen Browser, der die HTML-API unterstützt, z. B. Google Chrome und Firefox.

Der Betriebseffekt ist wie folgt:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-html5-pic-upload-pre-view-codes/

Der spezifische Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<title>HTML5上传图片预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="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" >
</form>
<script> 
$("#file0").change(function(){
 var objUrl = getObjectURL(this.files[0]) ;
 console.log("objUrl = "+objUrl) ;
 if (objUrl) {
  $("#img0").attr("src", objUrl) ;
 }
}) ;
//建立一個可存取到該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>
</body>
</html>

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.

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：jQuery-Webversion des Brick Breaker-Spielquellcodes „sharing_jquery“.Nächster Artikel：jQuery-Webversion des Brick Breaker-Spielquellcodes „sharing_jquery“.

In Verbindung stehende Artikel

Mehr sehen