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 Computer hochladen und den Inhalt der hochgeladenen Datei lesen. All dies möchte ich mit AngularJS tun.
Wenn ich versuche, den Wert zu drucken, wird $scope.file
er als undefiniert eingestuft.
angularjs
angularjs-fileupload
Aditya Sethi
quelle
quelle
Antworten:
Einige der Antworten hier schlagen die Verwendung vor
FormData()
, aber leider ist dies ein Browserobjekt, das in Internet Explorer 9 und darunter nicht verfügbar ist. Wenn Sie diese älteren Browser unterstützen müssen, benötigen Sie eine Sicherungsstrategie wie die Verwendung von<iframe>
oder Flash.Es gibt bereits viele Angular.js-Module zum Hochladen von Dateien. Diese beiden unterstützen explizit ältere Browser:
Und einige andere Optionen:
Eine davon sollte zu Ihrem Projekt passen oder Ihnen einen Einblick geben, wie Sie es selbst codieren können.
quelle
Am einfachsten ist es nämlich, die HTML5-API zu verwenden
FileReader
HTML ist ziemlich einfach:
Definieren Sie in Ihrem Controller die Methode 'add':
Browser-Kompatibilität
Desktop-Browser
Mobile Browser
Hinweis: Die Methode readAsBinaryString () ist veraltet und stattdessen sollte readAsArrayBuffer () verwendet werden.
quelle
onloadend
Rückruffunktion verarbeiten. Sie benötigen keine Bibliothek, um diese API zu verwenden. Sie befindet sich bereits in Ihrem Browser (es sei denn, Sie verwenden eine sehr alte). Hoffe das hilft.readAsArrayBuffer
Methode (die nur in Web- Workern verfügbar ist) anstatt auf die reguläre asynchrone FileReader-API verweisen ?Dies ist der moderne Browser-Weg ohne Bibliotheken von Drittanbietern. Funktioniert mit allen aktuellen Browsern.
HTML:
PHP:
js fiddle (nur Front-End) https://jsfiddle.net/vince123/8d18tsey/31/
quelle
ng-submit
oder eine Formularaktion? Dies allein macht nichtsUnten sehen Sie ein Arbeitsbeispiel für das Hochladen von Dateien:
http://jsfiddle.net/vishalvasani/4hqVu/
In dieser einen Funktion wird aufgerufen
Aus der Ansicht, die das Dateiarray im Controller aktualisiert
oder
Sie können das Hochladen von jQuery-Dateien mit AngularJS überprüfen
http://blueimp.github.io/jQuery-File-Upload/angularjs.html
quelle
Mit flow.js können Sie einen schönen Upload von Dateien und Ordnern erzielen .
https://github.com/flowjs/ng-flow
Schauen Sie sich hier eine Demo an
http://flowjs.github.io/ng-flow/
IE7, IE8, IE9 werden nicht unterstützt, sodass Sie möglicherweise eine Kompatibilitätsebene verwenden müssen
https://github.com/flowjs/fusty-flow.js
quelle
Verwenden Sie das
onchange
Ereignis, um das Eingabedateielement an Ihre Funktion zu übergeben.<input type="file" onchange="angular.element(this).scope().fileSelected(this)" />
Wenn ein Benutzer eine Datei auswählt, haben Sie einen Verweis darauf, ohne dass der Benutzer auf die Schaltfläche "Hinzufügen" oder "Hochladen" klicken muss.
quelle
Ich habe alle Alternativen ausprobiert, die @Anoyz (Richtige Antwort) bietet ... und die beste Lösung ist https://github.com/danialfarid/angular-file-upload
Einige Eigenschaften:
Es funktioniert gut für mich. Sie müssen nur auf Anweisungen achten.
Auf der Serverseite verwende ich NodeJs, Express 4 und Multer Middleware, um mehrteilige Anforderungen zu verwalten.
quelle
nlzt9LJWRrAZEO3ZteZUOgGc
aber ohne das PNG-Format gespeichert. Wie füge ich das hinzu?HTML
Skripte
quelle
Das
<input type=file>
Element funktioniert standardmäßig nicht mit der ng-model-Direktive . Es braucht eine benutzerdefinierte Direktive :Arbeitsdemo der
select-ng-files
Richtlinie, die mit 1 funktioniertng-model
$http.post
aus einer FileListBeim Senden eines POST mit einem Dateiobjekt ist es wichtig, dies festzulegen
'Content-Type': undefined
. Die XHR-Sendemethode erkennt dann das Dateiobjekt und legt den Inhaltstyp automatisch fest.quelle
Einfach mit einer Direktive
Html:
JS:
In der Direktive stellen wir sicher, dass ein neuer Bereich erstellt wird, und warten dann auf Änderungen, die am Dateieingabeelement vorgenommen wurden. Wenn Änderungen mit "emittieren" erkannt werden, senden Sie ein Ereignis an alle Vorgängerbereiche (nach oben) mit dem Dateiobjekt als Parameter.
In Ihrem Controller:
Dann in Ihrem Ajax-Anruf:
http://shazwazza.com/post/uploading-files-and-json-data-in-the-same-request-with-angular-js/
quelle
Ich denke, das ist der eckige Datei-Upload:
ng-Datei-Upload
Lightweight Angular JS-Direktive zum Hochladen von Dateien.
Hier ist die DEMO- Seite
https://github.com/danialfarid/ng-file-upload
quelle
Ihre Datei und JSON-Daten werden gleichzeitig hochgeladen.
quelle
Sie können ein
FormData
Objekt verwenden, das sicher und schnell ist:quelle
<input type="file" ng-change="contentChanged($event)">
, wie geht das?http://jsfiddle.net/vishalvasani/4hqVu/ funktioniert gut in Chrome und IE (wenn Sie CSS im Hintergrundbild ein wenig aktualisieren). Dies wird zum Aktualisieren des Fortschrittsbalkens verwendet:
In FireFox werden die [Prozent] -Daten von Angular jedoch nicht erfolgreich in DOM aktualisiert, obwohl Dateien erfolgreich hochgeladen wurden.
quelle
load
Ereignis anhören. Wenn die Länge berechenbar ist, wird ein Fortschrittsereignis ausgelöst, um den erfolgreichen Upload anzuzeigen. Dafür sorgt github.com/danialfarid/angular-file-upload bereits.Sie können IaaS für das Hochladen von Dateien in Betracht ziehen, z. B. Uploadcare . Es gibt ein Angular-Paket dafür: https://github.com/uploadcare/angular-uploadcare
Technisch gesehen ist es als Direktive implementiert und bietet verschiedene Optionen zum Hochladen und Manipulationen für hochgeladene Bilder innerhalb des Widgets:
Weitere Konfigurationsoptionen zum Spielen: https://uploadcare.com/widget/configure/
quelle
Ich weiß, dass dies ein verspäteter Eintrag ist, aber ich habe eine einfache Upload-Direktive erstellt. Was Sie in kürzester Zeit zum Arbeiten bringen können!
ng-simple-upload mehr auf Github mit einem Beispiel mit Web-API.
quelle
HTML
Fügen Sie Ihrem Controller die Methode 'profileimage ()' hinzu
quelle
Dies sollte ein Update / Kommentar zur Antwort von @ jquery-guru sein, aber da ich nicht genug Repräsentanten habe, wird es hier hingehen. Es behebt die Fehler, die jetzt vom Code generiert werden.
https://jsfiddle.net/vzhrqotw/
Die Änderung ist im Grunde:
Zu:
Wenn Sie möchten, können Sie sich gerne an einen geeigneteren Ort begeben.
quelle
Ich habe den ganzen Thread gelesen und die HTML5-API-Lösung sah am besten aus. Aber es ändert meine Binärdateien und beschädigt sie auf eine Weise, die ich nicht untersucht habe. Die Lösung, die perfekt für mich funktionierte, war:
HTML:
JS:
Serverseite (PHP):
quelle
Ich kann Dateien mit AngularJS mithilfe des folgenden Codes hochladen:
Die
file
für das Argument , das für die Funktion übergeben werden muss ,ngUploadFileUpload
ist ,$scope.file
wie pro Ihre Frage.Der entscheidende Punkt hier ist zu verwenden
transformRequest: []
. Dadurch wird verhindert, dass $ http mit dem Inhalt der Datei in Konflikt gerät.quelle
Die oben akzeptierte Antwort ist nicht browserkompatibel. Wenn jemand Kompatibilitätsprobleme hat, versuchen Sie dies.
Geige
Code anzeigen
Controller-Code
quelle
in einfachen Worten
in HTML - nur den folgenden Code hinzufügen
in der Steuerung - Diese Funktion wird aufgerufen, wenn Sie auf die Schaltfläche "Datei hochladen" klicken. Die Datei wird hochgeladen. Sie können es trösten.
Fügen Sie mehr in Controllern hinzu - unten Code in die Funktion einfügen. Diese Funktion wird aufgerufen, wenn Sie auf die Schaltfläche "Hiting the API (POST)" klicken . Es werden Dateien (die hochgeladen wurden) und Formulardaten an das Backend gesendet.
In diesem Fall habe ich den folgenden Code als Formulardaten hinzugefügt
quelle
Im WinkelJS-Controller
quelle
Wir haben HTML, CSS und AngularJS verwendet. Das folgende Beispiel zeigt, wie Sie die Datei mit AngularJS hochladen.
quelle
Arbeitsbeispiel mit Simple Directive ( ng-file-model ):
und verwenden Sie
FormData
, um eine Datei in Ihrer Funktion hochzuladen.Alle Credits gehen an https://github.com/mistralworks/ng-file-model
Ich habe ein kleines Problem, das Sie hier überprüfen können: https://github.com/mistralworks/ng-file-model/issues/7
Zum Schluss noch ein gegabeltes Repo: https://github.com/okasha93/ng-file-model/blob/patch-1/ng-file-model.js
quelle
Der Code hilft beim Einfügen einer Datei
insert.js
save_data.php
quelle
das funktioniert
file.html
controller.js
fileupload.php
quelle
DATEN HOCHLADEN
DATEIEN HERUNTERLADEN:
quelle
quelle