HTML5 implementiert mehrere Bild-Upload-Funktionen. HTML5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

HTML5 implementiert mehrere Bild-Upload-Funktionen. HTML5-Tutorial-Fähigkeiten

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Freigeben： 2016-05-16 15:45:35

Original

2767 Leute haben es durchsucht

Ich habe bereits über das Hochladen von Bildern geschrieben, aber es war ein einzelner Upload. Vor kurzem gab es eine geschäftliche Anforderung, die mehrere Uploads erforderte, also habe ich es umgeschrieben

HTML-Struktur:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<div class="container" >
<Label>Bitte wählen Sie eine Bilddatei aus: Label>
<Eingabe Typ="Datei" id="file_input"mehrere/>
div>

Lassen Sie uns übrigens über die Hauptlogik dieses Uploads sprechen:

·Verwenden Sie das Eingabe-Tag und wählen Sie „type=file“ aus. Denken Sie daran, mehrere Bilder mitzubringen, andernfalls können Sie nur ein einzelnes Bild auswählen

·Binden Sie die Änderungszeit der Eingabe,

·Der entscheidende Punkt ist, wie mit diesem Änderungsereignis umgegangen wird. Verwenden Sie die neue FileReader-Schnittstelle von H5, um die Datei zu lesen und in base64 zu kodieren. Als nächstes müssen Sie mit den Back-End-Klassenkameraden interagieren

JS-Code:

JavaScript-CodeInhalt in die Zwischenablage kopieren

window.onload = function(){
var input = document.getElementById("file_input");
var result,div;
if(typeof FileReader==='undefined'){
result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
input.setAttribute('disabled','disabled');
}else{
input.addEventListener('change',readFile,false);
}
　　　　　//handler
function readFile(){
for(var i=0;i<this.files.length;i++){
if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){　　//判断上传文件格式
return alert("上传的图片格式不正确，请重新选择")
　　　　　　　　　　}
var reader = new FileReader();
reader.readAsDataURL(this.files[i]);
reader.onload = function(e){
result = '
this.result+'" alt=""/>
';
div = document.createElement('div'
div.innerHTML = result;
document.getElementById('body').appendChild(div); //Dom-Baum einfügen
　　　　　 }
}

Dies geschieht jedoch nicht. Dadurch wird das Bild nur in die Base64-Kodierung konvertiert und dann im Frontend angezeigt. Wenn ich es aktualisiere, ist nichts zu sehen

Öffnen Sie nach dem Einfügen des Bildes die Entwicklertools und prüfen Sie, ob die HTML-Struktur wie folgt aussieht

Der realistische Ansatz besteht darin, dass wir die Dateien in der Dateiwarteschlange in der Verarbeitungsfunktion an das Backend senden. Die Backend-Studenten geben die MD5-verschlüsselte Datei und den der Datei entsprechenden Pfad an das Front-End zurück, und das Front-End nimmt diesen Pfad und stellt es auf der Seite dar.

Danach wird die MD5-Datei an das Backend zurückgesendet, da das Frontend die Bilder normalerweise nach dem Hochladen löscht. Der Zweck der Rückgabe besteht darin, dem Backend mitzuteilen, dass es bestätigen soll, dass diese Bilder das sind, was wir wollen, und das Backend speichert sie in der Datenbank.