1. Einige Methoden zur Verwirklichung der Bildvorschau.
Nach dem Verständnis sind die Methoden tatsächlich ähnlich. Es gibt wahrscheinlich die folgenden Möglichkeiten:
① Abonnieren Sie das Onchange -Ereignis des Eingabe -Elements [type = Datei].
Sobald der ausgewählte Pfad geändert wurde, wird das Bild auf den Server hochgeladen, und die Adresse des Bildes wird auf die Serverseite zurückgegeben und dem IMG -Element zugeordnet.
Nachteile: Die Arbeitsbelastung ist groß. Einige Uploads sind nicht die Bilder, die Benutzer am Ende hochladen müssen. Diese Methode speichert jedoch alle während des Upload -Prozesses ausgewählten Bilder auf dem Server, wodurch Ressourcenverschwendung verursacht werden. Darüber hinaus erfordert die Reinigung der vorübergehenden Vorschaubilder auf der Serverseite auch eine bestimmte Menge an Arbeit.
② Verwenden Sie den neuen HTML5 -Feature -FileReader.
Dieses Objekt liefert viele verwandte Methoden, die wichtigste Methode ist ReadasDataurl. Klicken Sie auf mich, um mehr zu erfahren.
Nachteile: Das Daten -URI -Schema, das durch die meetasDataurl -Methode von FileReader erhalten wurde, generiert eine sehr lange Base64 -Zeichenfolge. Wenn das Bild größer ist, ist die Zeichenfolge länger. Wenn der Seiten -Reflow auftritt, verursacht er die Leistungsverschlechterung. Darüber hinaus ist die Browserunterstützung inkonsistent und die unterstützten Browser sind: ff3.6+, Chrome7+, IE10+.
③ Verwenden Sie Window.url.createObjecturl anstelle von FileReader und verwenden Sie dann den dimaTransform.microsoft.Alphaimageloader -Filter, um mit IE kompatibel zu sein.
Nachteile: Aufgrund der Sicherheitsüberlegungen in IE11 kann die reale Adresse der ausgewählten Datei des Benutzers nicht durch Wert, äußerehtml und GetArttribute in der Eingabe -Element [type = Datei] erhalten werden und können nur erhalten werden.
D:/Frontend/Dateiname. Daher müssen Sie das Dokument verwenden. Selection.CreateReCollection -Methode, um die reale Adresse zu erhalten.
2. Meine Plug-in-Produktion
Ich habe eine konservativere Methode ausgewählt, bei der es sich um die dritte Methode handelt.
①Der erster Schritt ist das HTML -Layout
<div id = "pic"> <img id = "preview" src = "../ imgs/default.jpeg"> </div> <Eingabe type = "Datei" id = "uploadBtn" Accept = "Image/*" onchange = "setPreviewpic ()"> ">"> ">"> ">"> ">">
Möchten Sie so einfach sagen?
②Second Step, Plug-in JS-Kapselung.
1. Erstellen Sie ein Objekt
Ich übernehme hauptsächlich die kombinierte Vererbungsmethode und verkapuliere zwei Methoden, nämlich ein Upload für ein Bild und das Upload mehrerer Bild. Denn unabhängig davon, ob es ein einzelnes Bild hochgeladen oder ein einzelnes Bild hochgeladen wird, müssen Sie in KB die Eingangstaste, IMG -Tag, DIV eingewickelt und den maximalen einzelnen Bildwert hochladen. Daher müssen diese vier Parameter beim Erstellen des Upload -Bildobjekts übergeben werden. Die Methode zum Erstellen dieses Objekts lautet wie folgt:
var setPreviewpic = function (fileObj, preview, picWrap, maximgsize) {this.FileObj = fileObj; this.preview = preview; this.picwrap = picWrap;2. Definieren Sie das Matching -Muster
Da es Bilder hochlädt, wird zusätzlich zum Hinzufügen von Accept = "Image/*" zum Eingeben und zur Vorbereitung vorläufiger Einschränkungen auch eine JS -Regelmäßigkeit erforderlich, um festzustellen, ob es sich um ein Bild durch Pfaderkennung handelt. Definieren Sie dieses Muster auf Prototypen für die Verwendung in zwei Methoden:
SetPreviewpic.prototype.pattern = new regexp ('/. (Jpg | png | jpeg)+$', 'i');3. Definieren Sie die Methode
Die Hauptsache ist zu bestimmen, ob die Umgebung niedriger ist als IE11 und zwei Arten von Lösungen zu schreiben. Die erste besteht darin, das Bild direkt zu motivieren, indem das SRC von IMG geändert wird, und das zweite besteht darin, den Vorschau -Effekt durch Filter unter der unteren Version des IE zu erreichen.
FF, Chrome, IE11 oder höher: (Der Code für die Vorschau mehrerer Bilder wird hier veröffentlicht)
<span> if (maxpics) {</span> <br> if (this.FileObj.files && this.Fileobj.files [0]) {var imgs = this.picwrap.querySElektorAll ('img'); // Finden Sie, wie viele Bilder bereits in der DOM var num = imgs.length sind; var html = this.picwrap.innerhtml; if (number (num) <nummer (maxpics)) {// Beurteilen Sie, ob das maximale Upload -Limit überschritten wird, wenn (num == 1 && (! IMGS [0] .ClassList.Contains ('Newload')) {// Abdeckung des ersten Standardbildes überschritten wird html = '';} if (this.pattern.test (FileObj.files [0] .Name)) {if (JudgeSize (FileObj.Files [0] .Size/1024 style = "margin: 5px; width: '+width+' px; Höhe: '+Höhe+' px;" src = '+window.url.createObjecturl (this.FileObj.files [0])+' /> '+html; this.picwrap.innnerhtml = html;} else {alert ('Das Bild, das du hochgeladen hast, ist zu groß!');}} else {alert ('Was du hochgeladen hast, scheint kein Bild zu sein, bitte prüfe es!');Verwenden Sie unter IE11 Filter, um den Effekt zu erreichen:
var nums = this.picwrap.childnodes.length; // Weil QuerySelectorAllAll und andere Methoden nicht unterstützt werden. if (document.Selection) {var imgsrc = document.Selection.Createrange (). text; var image = new Image (); Image.src = imgsrc; FileSize = Image.FileSize; if (JudgeSize (Image.FileSize/1024, this.maximgSize)) {// Die Größe des DIV muss in IE var festgelegt werden ele = document.createelement ('div'); ele.style.width = width+'px'; ele.style.height = Höhe+'px'; ele.style.filter = "progid: dimagetra NSForm.Microsoft.Alphaimageloader (SIZIZEMETHOD = SAME, SRC = '"+IMGSRC+"') "; try {this.picwrap.Appendchild (ele);} catch (e) {alert ('the Bild, das Sie hochgeladen haben, ist falsch. Bitte wählen Sie noch einmal aus! '); return false;} this.preview.style.display = 'none'; document.selection.empty ();} else {alert ('Das Bild, das du hochgeladen hast, ist zu groß!');}}Zu diesem Zeitpunkt ist es fertig!
Verwendung:
<script type = "text/javaScript" src = "../ js/einzelnpic.js"> </script> <script> var fileObj = document.getElementById ('UploadBtn'); SetPreviewpic (FileObj, Preview, Picwrap, 100); // Definieren Sie das Upload -Bildobjekt, die Parameter sind die Eingangstaste zum Hochladen des Bildes, das IMG -Tag -Paket, das in IMG eingewickelte DIV und der maximale Einzelfotowert, das Gerät ist kbobj.upload (200,250). // Uploadpics (200.250,2); // Uploadpics (200.250,2); // Uploadpics (200.250,2); // Uploadpics (200.250,2); // Uploadpics (200.250,2); // Hochladen mehrere Bilder, die Parameter sind die Breite, Höhe und maximale Anzahl von Uploads} </script>Das obige ist das relevante Wissen über die von dem Editor vorgestellte JS-Upload-Image-Vorschau-Plug-in-Produktion (kompatibel für IE6). Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht. Der Herausgeber wird Ihnen rechtzeitig antworten!