Einführung
Mithilfe des FileReader -Objekts können Webanwendungen den auf dem Computer des Benutzers gespeicherten Inhalts von Dateien (oder Rohdatenpuffern) asynchron lesen und Dateiobjekte oder Blob -Objekte verwenden, um die zu verarbeitende Datei oder die zu verarbeitenden Daten anzugeben. Das Dateiobjekt kann vom vom Benutzer zurückgegebenen filelistischen Objekt nach der Auswahl einer Datei auf einem <input type = "text" /> oder aus dem von der Drag-and-Drop-Operation generierten DataTransfer-Objekt oder aus dem Rückgabeergebnis nach Ausführung der MOZGetasFile () -Methode auf einer HTMLCanvaselement zurückgegeben.
Mehrere Seiten, laden Sie mehrere Bilder -Demo -Codes hoch
<! DocType html> <html> <kopf> <titels> Laden Sie das Bild hoch, um das Vorschau -Bild anzuzeigen. Anzeige: Inline-Block; Rand-Rechts: 10px; Randboden: 10px; } </style> </head> <body> <div> <p> <label> Wählen Sie eine Bilddatei aus: </label> <input type = "file" id = "file_input" style = "display: keine;" /> </p> <div id = "result"> <a href = "javaScript: void (0);"> Bild hinzufügen </a> </div> </div> <div> <p> <label> Bitte wählen Sie eine Bilddatei: </label> <input type = "Datei" id = "file_input" style = "style =" display: none; /> </p> <div id = "result"> <a href = "javaScript: void (0);"> Bild hinzufügen </a> </div> </div> <script src = "jQuery-2.2.1.min $ (this) .Parents (". add_imgs"). "Entschuldigung, Ihr Browser unterstützt FileReader nicht"; input.setAttribute ('deaktiviert', 'deaktiviert'); } else {$ (input) .unbind ("ändern"). on ("ändern", function () {var file = this.files [0]; if (!/image /// W+/. test (Datei.Type)) {alert ("Datei muss ein Bild sein); Funktion (e) {$ (Ergebnis) .Append ('<img src = "'+this.result+'"/>');Das obige dreht sich alles um diesen Artikel, und ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.