In diesem Artikel wird Beispiele für JS HTML5-Multi-Bild-Upload- und Vorschau-Beispiele für Ihre Referenz angezeigt. Der spezifische Inhalt ist wie folgt
Hauptanwendung
1. HTML5 -Dateien können mehrere Dateien auswählen und mehrere Dateiinformationen abrufen
2. XMLHTTPREQUEST -Objekt, senden Sie die HTTP -Übertragungsanforderung
3. Platzieren Sie jede Datei in Formdata zur Übertragung
V.
HTML+CSS+JS -Code
<! DocType html> <head> <meta http-equiv = "content-type" content = "text/html" charset = "utf-8"/> <title> testen Sie HTML FileReader </title> <style> <style Typ = "Text/CSS"> HTML, Körper, Kopfzeile, Fußzeile, Div, UL, Li, H1, H2, H3, H4, H5, H6, Label, Eingabe, TextArea, P, Span, A {Padding: 0; Rand: 0;} img {Grenze: 0;} em, stark {Schriftgewicht: normal; Schriftstil: Normal;} ul {Listenstil: Keine;} H1, H2, H3, H4, H5, H6 {Schriftgewicht: Normal; Schriftgröße: 100%;} A, A: After {Text Decoration: Keine;}. foto_wrap {clear: beide;}. photo_wrap li {margin: 10px; Breite: 150px; float: links;}. photo_box {Höhe: 150px; Breite: 150px; Überlauf: versteckt; Position: relativ;}. photo_box .img1 {Höhe: 150px;}. photo_box .img2 {width: 150px;}. upload_result {Höhe: 50px;}. btn {Position: relativ; Höhe: 40px; Breite: 100px; float: links;}. btn {Höhe: 40px; Zeilenhöhe: 40px; Farbe: #fff; Anzeige: Block; Border-Radius: 3px; Text-Align: Mitte; Hintergrundfarbe: #FF5581; / * Alte Browser */ Hintergrund-Image: -moz-linear-Gradient (oben, #FA7B9C 0%, #ff5581 100%); / * Ff3.6+ */ Hintergrund-Image: -Webkit-Gradient (linear, links oben, linker unten, Farbstopp (0%,#FA7B9C), Color-Stop (100%,#ff5581)); / * Chrome, Safari4+ */ Hintergrund-Image: -Webkit-linear-Gradient (TOP, #FA7B9C 0%, #FF5581 100%); / * Chrome10+, Safari5.1+ */ Hintergrund-Image: -o-linear-Gradient (oben, #FA7B9C 0%, #FF5581 100%); / * Opera 11.10+ */ Hintergrund-Image: -ms-linear-Gradient (oben, #FA7B9C 0%, #FF5581 100%); / * IE10+ */ Hintergrund-Image: Linear-Gradient (bis unten, #fa7b9c 0%, #ff5581 100%); / * W3c */ filter: progid: diximagetransform.microsoft.gradient (startColorStr = '#fa7b9c', endColorStr = '#ff5581', GradientType = 0); / * IE6-8 */ box-shadow: 0 1px 0 rgba (255, 255, 255, 0,3) Einschub, 0 1px 2px rgba (0, 0, 0, 0,3);}. Btn_add_pic {width: 100px; Position: absolut; Top: 0; links: 0;}. Btn_Upload {width: 100px; Rand: 0 10px 10px; float: links;}. btn: hover, .BTN_CUR {BILTTER-COLOR: #FB99B1; / * Alte Browser */ Hintergrund-Image: -moz-linear-Gradient (oben, #fb99b1 0%, #ff5581 100%); / * Ff3.6+ */ Hintergrund-Image: -Webkit-Gradient (linear, links oben, links unten, Farbstopp (0%,#fb99b1), Farbstopp (100%, ## ff5581)); / * Chrome, Safari4+ */ Hintergrund-Image: -Webkit-linear-Gradient (oben, #fb99b1 0%, #ff5581 100%); / * Chrome10+, Safari5.1+ */ Hintergrund-Image: -o-linear-Gradient (oben, #fb99b1 0%, #ff5581 100%); / * Opera 11.10+ */ Hintergrund-Image: -ms-linear-Gradient (oben, #fb99b1 0%, #ff5581 100%); / * IE10+ */ Hintergrund-Image: Linear-Gradient (bis unten, #fb99b1 0%, #ff5581 100%); / * W3c */ filter: progid: diximagetransform.microsoft.gradient (startColorstr = '#fb99b1', endColorStr = '#ff5581', gradientType = 0); / * IE6-8 */}. Datei_input_wrap {Position: absolut; Top: 0; links: 0; Breite: 100px; Höhe: 40px;}. Datei_input_wrap Label {Breite: 100%; Höhe: 100%; Anzeige: Block; Deckkraft: 0; Cursor: Zeiger;}. File_input_wrap Eingabe {Opazität: 0; Filter: Alpha (Opazität = 0);/*IE8 und unten*/ Position: absolut; Top: 7px; Rechts: 173px; Cursor: Zeiger; Breite: 95px;}. photo_box .icon_pos {Höhe: 20px; Breite: 20px; Anzeige: Block; Position: absolut; Rechts: 0; unten: 0;}. photo_box .loading {Höhe: 10px; Anzeige: Block; Position: absolut; links: 0; unten: 0; Hintergrund-Image: URL (loading.gif);}. Sucess_icon {Hintergrund-Image: URL (iCons_01.png); Hintergrundposition: 0 0;}. ERROR_ICON {Hintergrund-Image: URL (iCons_01.png); Hintergrundposition: -20px 0;} </style> </head> <body> <div> <a id = "j_add_pic" href = "javaScript:;"> Bild add </a> <div> <Eingabe type = "Datei" id = "Datei" name "name" Datei "accept =" Image/*"multiple change =" Datei ". </div> </div> <a id = "j_upload" href = "javaScript:;"> Start Upload </a> <div id = "j_photo_wrap"> <ul> </ul> </div> </body> <script type = "text/javaScript" var img_index = new Array (); Funktion upload_img () {var j = 0; img (); Funktion img () {// 1. Erstellen xmlhttprequest -Objekt if (img_index.length> 0) {var SingleImg = img_index [j]; var xmlhttp; if (window.xmlhttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new Xmlhttprequest; // fix, wenn bestimmte Versionen von Mozillar -Browser -Fehler (xmlhttp.overridemetype) {xmlhttp.overridemimetype ('text/xml'); }; } else if (window.activeXObject) {// IE6, IE5 xmlhttp = new ActiveXObject ("microsoft.xmlhttp"); }; if (xmlhttp.upload) {// Fortschrittsleiste xmlhttp.upload.addeVentListener ("Fortschritt", Funktion (e) {if (e.LengthComputable) {var load_percent = (e.Loaded /e.total) * 100; li '). EQ (j) .Find ('. Loading '). CSS (' Breite ', load_percent+'%'); // 2. Rückruffunktion // OnReadyStatechange ist die Ereignishandle -Funktion, die jedes Mal bezeichnet wird, wenn die ReadyState -Eigenschaft ändert. if (json.status == 1) {$ ('#j_photo_wrap ul li'). Eq (j) .find ('. upload_result'). text (SingleImg.name+'Upload abgeschlossen'); $ ('#J_PHOTO_WRAP UL LI'). EQ (j) .Find ('. Laden'). Hide (); $ ('#J_PHOTO_WRAP ul li'). Eq (j) .find ('. Icon_pos'). AddClass ('Sucess_icon'); } else {$ ('#j_photo_wrap ul li'). Eq (j) .find ('. upload_result'). text (SingleImg.name+'Upload fehlgeschlagen'); $ ('#J_PHOTO_WRAP UL LI'). EQ (j) .Find ('. Laden'). Hide (); $ ('#J_PHOTO_WRAP UL LI'). EQ (j) .find ('. Icon_pos'). }} else {$ ('#j_photo_wrap ul li'). Eq (j) .find ('. upload_result'). text (SingleImg.name+'Upload fehlgeschlagen'); $ ('#J_PHOTO_WRAP UL LI'). EQ (j) .Find ('. Laden'). Hide (); $ ('#J_PHOTO_WRAP UL LI'). EQ (j) .Find ('. Laden'). Hide (); $ ('#J_PHOTO_WRAP UL LI'). EQ (j) .find ('. Icon_pos'). } if (j <img_index.length - 1) {j ++; img (); }}}}; // 3. Setzen Sie die Verbindungsinformationen // HTTP -Anforderungsparameter initialisieren, senden jedoch keine Anforderungen. // Die erste Parameterverbindungsmethode ist, die zweite ist die URL -Adresse, und die dritte True ist eine asynchrone Verbindung, die standardmäßig asynchron ist // Daten mit der Post -Methode xmlHttp.open ("post", "upload.php", true); // 4. Daten senden, mit dem Server interagieren // HTTP -Anforderungen senden, verwenden Sie die an die methode open () übergebenen Parameter und die an die Methode übergebene optionale Anforderung. Wenn wahr, wird der Satz gesendet sofort ausgeführt // Wenn er falsch ist (synchron), wird Sende erst ausgeführt, nachdem die Serverdaten zurückgekommen sind. FormData.Append ("fehlgedacht", SingleImg); xmlhttp.send (FormData); } //}}}}; $ ('#J_Upload'). Click (function () {upload_img ();}); $ ('#J_add_area'). Hover (function () {$ ('#j_add_pic'). $ ('#J_add_area'). Click (function () {$ ('#file'). Click ();}); Funktion Größe Größe (img) {if (img.offseteight> img.offsetwidth) {$ (img) .removeclass ('img1'). addClass ('img2'); } else {$ (img) .removeclass ('img2'). addClass ('img1'); }} function FileInfo (Quelle) {var ireg = /image//.*/i; var files = source.files; VAR -Name, Größe, Typ; für (var i = 0, f; f = Dateien [i]; i ++) {name = f.name; size = f.size; Typ = F.Type; if (! type.match (ireG)) {$ ('#j_photo_wrap ul'). append ('<li> <div>'+name+'ist kein Bild <span> </span> <span> </span> </div> <div> </div> </li>'); } else {img_index.push (f); if (size> 1048576) {$ ('#j_photo_wrap ul'). append ('<li> <div>'+name+'ist zu groß, um eine Vorschau <span> </span> <span> </span> </div> </div> </li>') zu generieren; } else {if (window.FileReader) {var fr = new FileReader (); fr.onload = (function (f) {return function (e) {$ ('#j_photo_wrap ul'). append ('<li> <div> <img onload = "resize (this);" src = "'+this.result+'"/> <span> </span> </span> </div> </</</li> </</</li> </</</</li> </</</li> </</</</li>; fr.readasdataurl (f); }}}}}}}; </script> </html>PHP hat den Dateicode erhalten (hier erhält nur den Dateinamen, Typ und Größe, und es werden keine anderen Vorgänge ausgeführt).
<? php $ name = $ _files ['fileedata'] ['name']; $ type = $ _FILES ['fehlgedacht'] ['Typ']; $ size = $ _FILES ['fehlgedacht'] ['Größe']; $ return = array ("name" => $ name, "type" => $ type, "size" => $ size, "Status" => 1); $ return = json_encode ($ return); echo $ return;?>Bestehende Probleme
1. Um Miniaturansichten zu generieren, nimmt ReadasDataurl beim Lesen des Dateiinhalts den Speicher auf, sodass große Bilder dazu führen, dass der Browser stecken bleibt oder abstürzt.
2. Das Hochladen wird in der Segmentierung nicht verarbeitet
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.