jQuery implementiert eine Vorschaufunktion von Bilddateien vor dem Hochladen

Wenn Sie ein gutes Werk fertigstellen möchten, müssen Sie es perfektionieren. Können wir es beispielsweise vor dem Hochladen mit jQuery in der Vorschau anzeigen? In diesem Artikel wird Ihnen hauptsächlich ein einfaches Beispiel für die Vorschaufunktion für jQuery-Bilddateien vor dem Hochladen vorgestellt. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und als Referenz geben. Ich hoffe, dass Sie nach dem Erlernen jQuery verwenden können, um die Vorschaufunktion von Bilddateien vor dem Hochladen zu implementieren.

1. Bereiten Sie zuerst ein p

Onchange-Trigger-Ereignis vor

<input type="file" onchange="preview(this)" ></span>
<p id="preview"></p>

2. Schreiben Sie JS-Code

//上传图片之前预览图片
function preview(file){
if (file.files && file.files[0]){ 
var reader = new FileReader(); 
reader.onload = function(evt){ 
$("#preview").html('<img src="&#39; + evt.target.result + &#39;" width="95px" height="50px" />'); 
} 
reader.readAsDataURL(file.files[0]); 
}else{
$("#preview").html('<p style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\&#39;&#39; + file.value + &#39;\&#39;"></p>'); 
} 
}

Haben Sie es gemeistert? Dies ist eine gute jQuery-Technik, die jeder schnell ausprobieren sollte.

Verwandte Empfehlungen:

PHP-Implementierungscode zum Hochladen von Bilddateien

PHP+Ajax-Implementierungsbeispiel für die Funktion zum Hochladen von Bilddateien_PHP

Javascript-Implementierung einer asynchronen Bild-Upload-Methode – Beispiel

Das obige ist der detaillierte Inhalt vonjQuery implementiert eine Vorschaufunktion von Bilddateien vor dem Hochladen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!