HTML5-Implementierung der Vorschau lokaler Bilder

In diesem Artikel werden hauptsächlich relevante Informationen zur HTML5-Implementierung der Vorschau lokaler Bilder vorgestellt. Freunde, die diese benötigen, können sich auf die folgende

Problembeschreibung beziehen
Angenommen, wir haben eine Bild-Upload-Steuerung in HTML:

Kopieren Sie den Code

Der Code lautet wie folgt:

<input id="upload_image" type="file" name="image" accept="image/*" />

Beachten Sie, dass Accept="image/*" Es ist sehr wichtig, es gibt an, dass das hochgeladene Bild mit dem Auswahltyp des Popup-Fensters des Systems und anderen Problemen bei der Verwendung des mobilen Endgeräts zusammenhängt. Fügen Sie es daher unbedingt hinzu.
Dann stellt sich die Frage: Gibt es eine Möglichkeit, den Inhalt des Bildes zu lesen, bevor das Formular an den Server gesendet wird?
Es scheint einfach zu sein, es sind alles Client-Dateien, also sollte es möglich sein, aber vorher gab es wirklich keine gute Möglichkeit, aber seit dem Aufkommen von HTML5 ist diese Funktion zurückgekehrt und diese Funktion kann leicht über FileReader realisiert werden .
Beispiele veranschaulichen das Problem

Code kopieren

Der Code lautet wie folgt:

$(function() { 
$('#upload_image').change(function(event) { 
// 根据这个 <input> 获取文件的 HTML5 js 对象 
var files = event.target.files, file; 
if (files && files.length > 0) { 
// 获取目前上传的文件 
file = files[0]; 
// 来在控制台看看到底这个对象是什么 
console.log(file); 
// 那么我们可以做一下诸如文件大小校验的动作 
if(file.size > 1024 * 1024 * 2) { 
alert(&#39;图片大小不能超过 2MB!&#39;); 
return false; 
} 
// !!!!!! 
// 下面是关键的关键，通过这个 file 对象生成一个可用的图像 URL 
// 获取 window 的 URL 工具 
var URL = window.URL || window.webkitURL; 
// 通过 file 生成目标 url 
var imgURL = URL.createObjectURL(file); 
// 用这个 URL 产生一个 <img> 将其显示出来 
$(&#39;body&#39;).append($(&#39;<img/>&#39;).attr(&#39;src&#39;, imgURL)); 
// 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了 
// URL.revokeObjectURL(imgURL); 
} 
}); 
});

Kurz Beschreibung
Der gesamte Vorgang ist wie folgt aufgebaut:
1. Lösen Sie das Ereignis durch das Änderungsereignis von aus . Erhalten Sie die hochgeladene Datei über die Objektdatei „Ereignisobjekt“
3. Erzeugen Sie eine verwendbare URL aus dem Dateiobjekt
4. Geben Sie den Server dieser URL frei

Wichtige Punkte:
1 Für dieselbe Datei wird bei jedem Aufruf von URL.createObjectURL eine andere URL neu generiert .createObjectURL wird aufgerufen, der Browser erstellt automatisch Speicherplatz für die Bereitstellung dieser URL, was bedeutet, dass diese URL erfolgreich angefordert werden kann. 3 Wenn URL.revokeObjectURL(imgURL) aufgerufen wird, wird der Server ausgeschaltet , und die URL wird erneut angefordert.
4 Dies alles ist eine Frage des Clients, der Server weiß wahrscheinlich nichts davon. Die imgURL sieht wahrscheinlich so aus : blob:http%3A/ /localhost%3A8000/22cc97d5-5e46-4d87-9df4-c3e8c0aa72bb


Verwandte Empfehlungen:

Verwenden Sie HTML5 Canvas, um eine einfache Masturbation zu erstellen Spiel

Das obige ist der detaillierte Inhalt vonHTML5-Implementierung der Vorschau lokaler Bilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!