Ich habe versucht, ng-model für das Eingabe-Tag mit der Typdatei zu verwenden:
<input type="file" ng-model="vm.uploadme" />
Nach Auswahl einer Datei im Controller ist $ scope.vm.uploadme jedoch immer noch undefiniert.
Wie erhalte ich die ausgewählte Datei in meinem Controller?
angularjs
angularjs-ng-model
angularjs-fileupload
Endy Tjahjono
quelle
quelle
Antworten:
Ich habe eine Problemumgehung mit der Direktive erstellt:
Und das Eingabe-Tag wird:
Oder wenn nur die Dateidefinition benötigt wird:
quelle
Ich benutze diese Richtlinie:
und rufe es so auf:
Die Eigenschaft (editItem.editItem._attachments_uri.image) wird mit dem Inhalt der Datei gefüllt, die Sie als Daten-Uri (!) Auswählen.
Bitte beachten Sie, dass dieses Skript nichts hochlädt. Ihr Modell wird nur mit dem Inhalt Ihrer Datei gefüllt, die ad a data-uri (base64) codiert ist.
Eine funktionierende Demo finden Sie hier: http://plnkr.co/CMiHKv2BEidM9SShm9Vv
quelle
ngModel
der$render
Funktion?So aktivieren Sie
<input type="file">
die Arbeit mitng-model
Arbeitsdemo der Richtlinie, mit der gearbeitet wird
ng-model
Die
ng-model
Kernrichtlinie funktioniert nicht<input type="file">
sofort.Diese benutzerdefinierte Richtlinie ermöglicht
ng-model
und hat den zusätzlichen Vorteil ermöglicht , dieng-change
,ng-required
undng-form
Richtlinien zur Arbeit mit<input type="file">
.quelle
Dies ist ein Nachtrag zur Lösung von @ endy-tjahjono.
Am Ende konnte ich den Wert von uploadme nicht aus dem Bereich abrufen . Obwohl uploadme im HTML durch die Direktive sichtbar aktualisiert wurde, konnte ich über $ scope.uploadme immer noch nicht auf seinen Wert zugreifen. Ich konnte den Wert jedoch über den Bereich festlegen. Geheimnisvoll, richtig ..?
Wie sich herausstellte, wurde durch die Direktive ein untergeordneter Bereich erstellt, und der untergeordnete Bereich hatte ein eigenes Uploadme .
Die Lösung bestand darin, ein Objekt anstelle eines Grundelements zu verwenden, um den Wert von uploadme zu speichern .
In der Steuerung habe ich:
und im HTML:
Es gibt keine Änderungen an der Richtlinie.
Jetzt funktioniert alles wie erwartet. Ich kann den Wert von uploadme.src mit $ scope.uploadme von meinem Controller abrufen.
quelle
$scope.uploadme = { src: '' }
Hallo Leute, ich erstelle eine Direktive und habe mich bei bower registriert.
Diese Bibliothek hilft Ihnen beim Modellieren von Eingabedateien und gibt nicht nur Dateidaten zurück, sondern auch Dateidaten-URL oder Basis 64.
https://github.com/mistralworks/ng-file-model/
Hoffnung wird dir helfen
quelle
reader.readAsDataURL
Methode ist veraltet. Moderner Code verwendet URL.create ObjectURL () .Dies ist eine leicht modifizierte Version, mit der Sie den Namen des Attributs im Bereich angeben können, genau wie bei ng-model. Verwendung:
Richtlinie:
quelle
Für die Eingabe mehrerer Dateien mit lodash oder Unterstrich:
quelle
quelle
Ich musste dasselbe bei mehreren Eingaben tun, also habe ich die @ Endy Tjahjono-Methode aktualisiert. Es gibt ein Array zurück, das alle gelesenen Dateien enthält.
quelle
Ich musste die Direktive von Endy ändern, damit ich Last Modified, lastModifiedDate, Name, Größe, Typ und Daten sowie ein Array von Dateien abrufen kann. Für diejenigen unter Ihnen, die diese zusätzlichen Funktionen benötigen, geht es los.
UPDATE: Ich habe einen Fehler gefunden, bei dem die Dateien nie so abgewählt werden, wie sie angezeigt werden, wenn Sie die Datei (en) auswählen und dann erneut auswählen, aber stattdessen abbrechen. Also habe ich meinen Code aktualisiert, um das zu beheben.
quelle
Wenn Sie etwas eleganteres / integrierteres wünschen, können Sie einen Dekorateur verwenden , um die
input
Richtlinie mit Unterstützung für zu erweiterntype=file
. Die wichtigste Einschränkung ist, dass diese Methode in IE9 nicht funktioniert, da IE9 die Datei-API nicht implementiert hat . Die Verwendung von JavaScript zum Hochladen von Binärdaten unabhängig vom Typ über XHR ist in IE9 oder früher einfach nicht nativ möglich (Verwendung vonActiveXObject
für den Zugriff auf das lokale Dateisystem zählt nicht, da die Verwendung von ActiveX nur nach Sicherheitsproblemen fragt).Für diese genaue Methode ist auch AngularJS 1.4.x oder höher erforderlich. Möglicherweise können Sie dies jedoch anpassen,
$provide.decorator
anstatt es zu verwenden.angular.Module.decorator
Ich habe diesen Kern geschrieben , um zu demonstrieren, wie dies unter Einhaltung des AngularJS- Styleguides von John Papa zu tun ist :Warum wurde das überhaupt nicht gemacht? Die AngularJS-Unterstützung soll nur bis zum IE9 zurückreichen. Wenn Sie mit dieser Entscheidung nicht einverstanden sind und der Meinung sind, dass sie dies sowieso hätten tun sollen, dann springen Sie mit dem Wagen zu Angular 2+, da Angular 2 buchstäblich eine bessere moderne Unterstützung bietet.
quelle
Versuchen Sie dies, dies funktioniert für mich in eckigen JS
quelle