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

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

1. <div class="container" >
2.  <Label>Bitte wählen Sie eine Bilddatei aus: Label>
3.  <Eingabe Typ="Datei" id="file_input"mehrere/>
4. 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

1. window.onload = function(){   
2.         var input = document.getElementById("file_input");   
3.         var result,div;   
4.     
5.         if(typeof FileReader==='undefined'){   
6.             result.innerHTML = "抱歉，你的浏览器不支持 FileReader";   
7.             input.setAttribute('disabled','disabled');   
8.         }else{   
9.             input.addEventListener('change',readFile,false);   
10.         }
    　　　　　//handler   
11.         function readFile(){   
12.             for(var i=0;i<this.files.length;i++){   
13.                 if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){　　//判断上传文件格式   
14.                     return alert("上传的图片格式不正确，请重新选择")
    　　　　　　　　　　}   
15.                 var reader = new FileReader();   
16.                 reader.readAsDataURL(this.files[i]);   
17.                 reader.onload = function(e){   
18.                     result = '
    this.result+'" alt=""/>
    ';
19. div = document.createElement('div'
20. div.innerHTML = result;
21. document.getElementById('body').appendChild(div); //Dom-Baum einfügen
    　　　　　 }
22.                                                           
                                                             
23. }
Geht es so, dass man mehrere Bilder hochlädt? 0.0

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.

Sagen Sie mir, wie ich mit jquery interagieren soll

JavaScript-Code

Inhalt in die Zwischenablage kopieren

1. Funktion readFile(){   
2.             var fd = new FormData();   
3.             für(var i=0;i<dieses.files.length;i ){   
4.                 var reader = new FileReader();   
5.                 reader.readAsDataURL(this.files[i]);   
6.                 fd.append(i,this.files[i]);
   　　　　　　　　　 }   
7.                 $.ajax({   
8.                     URL : '',   
9.                     Typ : 'post',   
10.                     Daten : fd,   
11.                     Erfolg : Funktion(Daten){   
12.                         console.log(data)   
13.                   　}    
14.                 })   
15. }      

FormData也是H5的新接口，用来模拟表单控件的提交，最大的好处呢就是可以提交二进制文件

然后Erfolg的回调里面我们拿回了想要的数据后呢，就可以将图片插进去页面啦，类似之前的做法~

上个效果图：

以上就是本文的全部内容,希望对大家的学习有所帮助.

原文:http://www.cnblogs.com/weapon-x/p/5237064.html