Eine kurze Aufzeichnung einiger Codes, die heute Morgen H5 hochladen, und es gibt immer noch Fallstricke
1. Anzeige
Da die Front-End-Upload-Datei durch das Formularformular weitergegeben werden muss und Ajax nicht verwendet werden kann. Auf diese Weise ist es wirklich nicht gut, eine Eingabe mit Type -Datei auf einer mobilen Seite zu setzen. Ist es sehr frustrierend, wie in der Abbildung unten gezeigt?
Nachdem einige PCs die Lösung gefunden hatten, ersetzten diese Eingabe diese Eingabe durch die JQuery -Tool -Bibliothek wie Uploadify, aber die meisten mobilen Browser unterstützen Flash nicht. Die endgültige Methode besteht also darin, das Formularformular zu verwenden. Setzen Sie einfach die Transparenz des Formulars und die Eingabe auf 0 ein, damit sie sich in einem DIV befinden, wobei der Inhalt für die Anzeige vorbereitet ist und der angezeigte Inhalt so erstellt werden kann, wie Sie möchten. Der Code ist wie folgt:
<! DocType html> <html> <head> <meta charset = "utf-8"> <meta name = "viewPort" content = "width = Gerätebreite, initial-scale = 1,0, user-scalable = no"> <title Rand: 0 Auto; Farbe: #fff; Padding: 0px 5px; -Webkit-Border-Radius: 2px; Border-Radius: 2px; Rand: 0 Auto; } .Upload Form {Breite: 100%; Position: absolut; links: 0; Top: 0; Deckkraft: 0; filter:alpha(opacity=0);} .upload form input{width: 100%;} </style> </head> <body> <div> <img src="img/1.jpg" /> </div> <div> <p> Upload image</p> <form> <input type="file" /> </form> </div> </body></html>Das Erscheinungsbild ist wie im Bild gezeigt, so dass es im P-Tag "Upload-Bild" angezeigt wird. Wenn Sie darauf klicken, werden Sie die Auswahl der Datei auswirken
2. JS -Code
Ich habe es ganz einfach geschrieben, nur die grundlegenden Funktionen des H5 -Uploads verwenden
Der HTML -Code lautet wie folgt. Aktion ist der Pfad, den Sie anfordern können. Was ich hier mache, ist das Hochladen und Ändern des Avatars, wenn sich die Datei ändert. Das Namensattribut des Eingabetags kann nicht weggelassen werden, sondern bezieht sich auf die Backend -Schnittstelle.
<form id = "uploadForm" engType = "multiPart/form-data" methode = "post" action = "xxxxxx"> <input type = "Datei" name = "ImageFile" id = "ImageFile" onchange = "fileSelected ()"/> </form>
var imaxFileSize = 2097152; //2mwindow.FileSelected = function () {var ofile = document.getElementById ('ImageFile'). Dateien [0]; // Lesen Sie die Datei var rfilter =/^(Bild // Bmp | Bild // Gif | Bild // JPEG | Image // png | Bild // tiff) $/i; if (! rFilter.test (vonile.type)) {alert ("Dateiformat muss ein Bild sein"); zurückkehren; } if (vonile.size> iMaxFileSize) {alert ("Die Bildgröße darf 2M nicht überschreiten"); zurückkehren; } var vfd = new FormData (document.getElementById ('uploadForm')), // Anforderung und Daten oxhr = new XMLHTTPrequest (); oxhr.addeventListener ('last', function (resUpload) {// Erfolg}, false); oxhr.addeventListener ('error', function () {// fehlgeschlagen}, false); oxhr.addeventListener ('abort', function () {// interrupt}, false); oxhr.open ('post', actionurl); oxhr.send (vfd);};Details bestimmen den Erfolg oder Misserfolg, sodass Sie alles ernst nehmen müssen.
Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.