Hier ist mein HTML-Formular:
<form name="myForm" ng-submit="">
<input ng-model='file' type="file"/>
<input type="submit" value='Submit'/>
</form>
Ich möchte ein Bild vom lokalen Rechner hochladen und den Inhalt der hochgeladenen Datei lesen. All dies möchte ich mit AngularJS tun.
Wenn ich versuche, den Wert von "$scope.file" zu drucken, kommt es als undefiniert.
Einige der Antworten hier schlagen die Verwendung von FormData()
vor, aber leider ist das ein Browser-Objekt, das in Internet Explorer 9 und darunter nicht verfügbar ist. Wenn Sie diese älteren Browser unterstützen müssen, benötigen Sie eine Backup-Strategie, wie z.B. die Verwendung von <iframe>
oder Flash.
Es gibt bereits viele Angular.js-Module, die das Hochladen von Dateien ermöglichen. Diese beiden bieten explizite Unterstützung für ältere Browser:
Und einige andere Optionen:
Eine davon sollte zu Ihrem Projekt passen oder kann Ihnen einen Einblick geben, wie Sie es selbst programmieren können.
Unten sehen Sie ein funktionierendes Beispiel für das Hochladen von Dateien:
In diesem Beispiel wird eine Funktion namens
setFiles
From View, die das Datei-Array im Controller aktualisiert
oder
Sie können jQuery File Upload mit AngularJS überprüfen
[
]() funktioniert gut in Chrome und IE (wenn Sie CSS ein wenig in background-image aktualisieren). Dies wird für die Aktualisierung des Fortschrittsbalkens verwendet: scope.progress = Math.round(evt.loaded * 100 / evt.total)
aber in FireFox angular's [percent] Daten nicht in DOM erfolgreich aktualisiert, obwohl Dateien erfolgreich hochgeladen werden.