ng-model für die `<input type="file"/>`, (mit der Richtlinie DEMO)

Ich versuche mit ng-model auf dem input-tag mit type Datei:

<input type="file" ng-model="vm.uploadme" />

Aber nach Auswahl einer Datei im controller, $Umfang.vm.uploadme ist noch nicht definiert.

Wie bekomme ich die ausgewählte Datei in meinen controller?

Siehe stackoverflow.com/a/17923521/135114, besonders der zitierte Beispiel online unter jsfiddle.net/danielzen/utp7j
Ich glaube, Sie müssen immer geben Sie die name-Eigenschaft eines html-Elements bei Verwendung ngModel.

InformationsquelleAutor Endy Tjahjono | 2013-06-12

320

Erstellte ich einen workaround mit der Richtlinie:
```
.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    scope.$apply(function () {
                        scope.fileread = loadEvent.target.result;
                    });
                }
                reader.readAsDataURL(changeEvent.target.files[0]);
            });
        }
    }
}]);
```
Und der input-tag wird:
```
<input type="file" fileread="vm.uploadme" />
```
Oder wenn Sie einfach die Datei, die definition wird benötigt:
```
.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                scope.$apply(function () {
                    scope.fileread = changeEvent.target.files[0];
                    //or all selected files:
                    //scope.fileread = changeEvent.target.files;
                });
            });
        }
    }
}]);
```
- Wie erhalte ich Zugang zu den Bild-Daten von dem controller?
- durch $Umfang.uploadme (wie in der Frage).
- Ich benutze uploadme als src im img-tag, damit ich sehen kann, ist es immer, die von der Richtlinie. Allerdings, wenn ich versuche, es zu packen aus dem controller mit $scope.uploadme, es ist "undefined". Ich kann uploadme von der Steuerung, obwohl. Zum Beispiel, $Umfang.uploadme="*" lässt das Bild verschwinden.
- vielleicht erstellen Sie eine neue Frage mit Beispielcode enthalten?
- Das problem ist, dass die Richtlinie schafft einen childScope, und setzt uploadme in diesem Bereich. Die ursprünglichen (übergeordneten) Rahmen hat auch eine uploadme, die unberührt von der childScope. Ich kann das update uploadme in den HTML von entweder Rahmen. Gibt es eine Möglichkeit zu vermeiden, die Schaffung einer childScope überhaupt?
- ist es bereits base-64?
- es sieht aus wie die Datei, die definition ist nicht genug, um es hochzuladen. Bin ich etwas fehlt?
- gut die Frage war über ng-Modell nicht funktioniert, nicht über hochladen von Dateien 🙂 Zu dieser Zeit wusste ich nicht brauchen, um die Datei hochzuladen. Aber vor kurzem habe ich gelernt, wie der upload-Datei aus dem eierkopf.io-tutorial.
- Das funktioniert nicht mit multiple-input-type-file-elements. Gibt es eine Möglichkeit, damit es funktioniert?
- Sie können tun andere Sache, die Sie beim Umgang mit dem change-Ereignis, zum Beispiel immer alle changeEvent.Ziel.Dateien, nicht nur die erste, wie ich es Tat. Die beiden kommentierten Zeilen auf meine Antwort.
- Tipp: Wenn Sie feststellen, dass Ihre controller-variable null ist, können Sie zu binden, müssen Sie zu einem übergeordneten Bereich wie <input type="file" fileread="$parent.uploadme" />. Ich fand das mit Ionischen, weil viele es Richtlinien erstellen einen untergeordneten Bereich. Ich musste $parent.$parent.$parent.newImage bekommen Sie bis zu meinem root-controller.
- vergessen Sie nicht, $scope.$auf('$destory', function(){ element.unbind("ändern"); }
- ich denke, es ist besser, vergeben Sie den Dateinamen in ng-model über den gesamten Inhalt der Datei.
- Ich hatte einen Albtraum schreiben eines unit-test für diese Anregungen, ich kann nicht scheinen, um die ändern-Funktion, um das Feuer in der unit-test.
- Können diese Richtlinie zu unterstützen "PDF" hochladen? Pdf-Datei-Unterstützung dataurl Lesen?
- Dies ist eine großartige Lösung. Aber es fehlt ein bit. Wenn der Eingang aktualisiert wird, sollte das Formular werden als fehlerhaft markiert. Hinzufügen require: '^form', der Richtlinie definition, übergeben Sie das Formular-controller, um die link-Funktion, dann rufen Sie form.$setDirty() im $apply Funktion.
- Ich habe eine Frage.... Ist das nicht viel zu kompliziert im Vergleich zu reinem javascript und html? Im ernst, Sie wirklich brauchen, um zu verstehen, AngularJS zu erreichen, diese Lösung... und es scheint, dass ich tun könnte se auch gleich mit einem javascript-event. Warum tut es der Winkel-Weg und nicht die reinen JS Weg?
- $scope.$on('$destroy', function(){ element.unbind("change"); }); korrigierte code von @Nawlbergs
- um zu überprüfen, ob die Eingabe ist es gelöscht wurden, verwenden: (changeEvent.Ziel.files[0] instanceof-Blob), welche true oder false, im Falle von falschen, Umfang.fileread = "
- Tjahjono Oben genannte Lösung funktioniert nicht für macos firefox -, chrome-und safari-Browsern.
- Die reader.readAsDataURL Methode ist veraltet. Moderne code verwendet URL.createObjectURL().
InformationsquelleAutor Endy Tjahjono

Ich mit dieser Direktive:

angular.module('appFilereader', []).directive('appFilereader', function($q) {
    var slice = Array.prototype.slice;

    return {
        restrict: 'A',
        require: '?ngModel',
        link: function(scope, element, attrs, ngModel) {
                if (!ngModel) return;

                ngModel.$render = function() {};

                element.bind('change', function(e) {
                    var element = e.target;

                    $q.all(slice.call(element.files, 0).map(readFile))
                        .then(function(values) {
                            if (element.multiple) ngModel.$setViewValue(values);
                            else ngModel.$setViewValue(values.length ? values[0] : null);
                        });

                    function readFile(file) {
                        var deferred = $q.defer();

                        var reader = new FileReader();
                        reader.onload = function(e) {
                            deferred.resolve(e.target.result);
                        };
                        reader.onerror = function(e) {
                            deferred.reject(e);
                        };
                        reader.readAsDataURL(file);

                        return deferred.promise;
                    }

                }); //change

            } //link
    }; //return
});

ab und rufen Sie es wie folgt:

<input type="file" ng-model="editItem._attachments_uri.image" accept="image/*" app-filereader />

Eigentum (editItem.editItem._attachments_uri.Bild) wird gefüllt mit dem Inhalt der Datei, die Sie wählen als Daten-uri (!).

Bitte beachten Sie, dass dieses Skript nicht alles hochladen, was. Es wird nur füllen Sie Ihr Modell mit dem Inhalt der Datei codiert ad eine data-uri (base64).

Schauen Sie sich eine funktionierende demo hier:
http://plnkr.co/CMiHKv2BEidM9SShm9Vv

Sieht vielversprechend aus, können Sie bitte erklären, die Logik hinter dem code und Kommentar zu browser-Kompatibilität(IE und nicht - fileAPI-browser meistens)?
Auch, nach meinem besten Verständnis, wenn ich den content-type-header der AJAX-request nicht definiert und wird versuchen, Sie zu senden, wie ein Feld, um die server -, Winkel-upload, vorausgesetzt, dass der browser unterstützt die fileAPI, bin ich richtig?
Sie sind nicht richtig!!!! Dieses Skript wird nicht senden Sie alles. Es liest die ausgewählte Datei als Base64-string und aktualisieren Sie Ihr Modell mit diesem string.
Könnten Sie bitte den link aktualisieren, um die plnkr?
Ja, ich verstehe, was ich meine ist, dass, indem Sie senden ein Formular mit einem file-Feld (ein relativer Pfad zu der Datei, die in dem Computer des Benutzers in einer FileAPI-Objekt), können Sie stellen Sie den Winkel laden Sie die Datei durch einen XHR-request durch setzen des content-type-header auf "undefined"
Ich aktualisiert die plunkr link!
es hat nicht funktioniert mit IE11
funktioniert im ie11 jetzt!
Hi @Elmer' war immer noch nicht funktioniert, aber das Problem war das ng-repeat. Ändern image in dummy.images zu image in dummy.images track by $index hat Prima funktioniert jetzt. Dank
Was ist der Zweck der overwritting ngModel's $render Funktion?
Ist es möglich, den Dateinamen mit dieser Richtlinie? Der upload funktioniert Super, aber ich brauche die Dateinamen der ausgewählten Bilder, auch. Könnte jemand helfen?
Wie kann restrict: 'A'?
Die reader.readAsDataURL Methode ist veraltet. Moderne code verwendet URL.createObjectURL().

InformationsquelleAutor Elmer

Arbeiten Demo der Richtlinie, das Funktioniert mit `ng-model`

Aktivieren `<input type="file">` arbeiten mit `ng-model`

Den Kern ng-model Richtlinie funktioniert nicht mit <input type="file" aus der box.

Diese benutzerdefinierte Richtlinie ermöglicht ng-model und hat den zusätzlichen Vorteil, dass der ng-change, ng-required, und ng-form Richtlinien für die Arbeit mit <input type="file">.

JS:

angular.module("app",[]);

angular.module("app").directive("selectNgFiles", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
});

HTML:

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app">
    <h1>AngularJS Input `type=file` Demo</h1>
    
    <input type="file" select-ng-files ng-model="fileArray" multiple>

    <code><table ng-show="fileArray.length">
    <tr><td>Name</td><td>Date</td><td>Size</td><td>Type</td><tr>
    <tr ng-repeat="file in fileArray">
      <td>{{file.name}}</td>
      <td>{{file.lastModified | date  : 'MMMdd,yyyy'}}</td>
      <td>{{file.size}}</td>
      <td>{{file.type}}</td>
    </tr>
    </table></code>
    
  </body>

Sie können die Bedingung überprüfen, wenn es keine ausgewählten Dateien, ng-Modell nicht definiert **** if(Dateien.Länge > 0) { ngModel.$setViewValue(Dateien); } else { ngModel.$setViewValue(undefined); }
Wie bekommt man Daten von der Datei ? Und was sind die anderen Attribute, die wir verwenden können,, wie {{Datei.name}}
Siehe MDN-Web-API-Referenz - Datei und MDN-Referenz - Dateien Verwenden von web-Anwendungen

InformationsquelleAutor georgeawg

27

Dies ist ein Nachtrag zu @endy-tjahjono Lösung.

Landete ich nicht in der Lage, um den Wert der uploadme aus dem Rahmen. Obwohl uploadme in der HTML war sichtlich aktualisiert durch die Richtlinie, konnte ich immer noch nicht auf seinen Wert von $scope.uploadme. Ich war in der Lage, seinen Wert aus dem Bereich, aber. Geheimnisvoll, richtig..?

Als es stellte sich heraus, ein Kind Anwendungsbereich wurde durch die Richtlinie, und die untergeordneten Bereich hatte seine eigene uploadme.

Die Lösung war die Verwendung eines Objekts, nicht als primitiv zu halten, den Wert der uploadme.

In der Steuerung habe ich:
```
$scope.uploadme = {};
$scope.uploadme.src = "";
```
und im HTML:
```
 <input type="file" fileread="uploadme.src"/>
 <input type="text" ng-model="uploadme.src"/>
```
Gibt es keine änderungen der Richtlinie.

Nun, es funktioniert alles wie erwartet. Ich kann schnappen Sie sich den Wert von uploadme.src von meinem controller mit $scope.uploadme.
- Vielleicht ist das ähnlich zu deinem Problem? eierkopf.io/Unterricht/angularjs-den-Punkt
- Yup, genau das ist es.
- Ich bestätige die gleichen Erfahrungen; sehr schön Debuggen und Erklärung. Ich bin mir nicht sicher, warum die Richtlinie schafft einen eigenen Bereich.
- Alternativ, kann ein inline-Deklaration: $scope.uploadme = { src: '' }
InformationsquelleAutor Per Quested Aronsson
9

Hallo Leute, ich erstellen Sie eine Richtlinie und registriert Laube.

diese lib wird Ihnen helfen, die Modellierung der input-Datei, nicht nur zurück, Datei-Daten, sondern auch Datei dataurl-oder base 64.
```
{
    "lastModified": 1438583972000,
    "lastModifiedDate": "2015-08-03T06:39:32.000Z",
    "name": "gitignore_global.txt",
    "size": 236,
    "type": "text/plain",
    "data": "data:text/plain;base64,DQojaWdub3JlIHRodW1ibmFpbHMgY3JlYXRlZCBieSB3aW5kb3dz…xoDQoqLmJhaw0KKi5jYWNoZQ0KKi5pbGsNCioubG9nDQoqLmRsbA0KKi5saWINCiouc2JyDQo="
}
```
https://github.com/mistralworks/ng-file-model/

Hoffe, dass wird Ihnen helfen,
- wie es zu benutzen ist die Verwendung von $scope? Ich habe versucht, mit dieser aber habe nicht definiert, wenn das Debuggen.
- Schöne Arbeit yozawiratama ! Es funktioniert gut. Und @GujaratSantana, wenn <input type="file" ng-Datei-model="myDocument"/> dann verwenden Sie einfach $Umfang.myDocument.name oder allgemein $Bereich.myDocument.<any property> wo Eigentum einer von der ["lastModified", "lastModifiedDate", "name", "Größe", "Typ", "Daten"]
- kann nicht installiert werden, via bower
- wie Benutzer mehrere Dateien hochladen ?
- Die reader.readAsDataURL Methode ist veraltet. Moderne code verwendet URL.createObjectURL().
InformationsquelleAutor yozawiratama

Dies ist eine leicht modifizierte version, die Sie können, geben Sie den Namen des Attributs in dem Umfang, wie Sie es tun, mit ng-Modell, Verwendung:

    <myUpload key="file"></myUpload>

Richtlinie:

.directive('myUpload', function() {
    return {
        link: function postLink(scope, element, attrs) {
            element.find("input").bind("change", function(changeEvent) {                        
                var reader = new FileReader();
                reader.onload = function(loadEvent) {
                    scope.$apply(function() {
                        scope[attrs.key] = loadEvent.target.result;                                
                    });
                }
                if (typeof(changeEvent.target.files[0]) === 'object') {
                    reader.readAsDataURL(changeEvent.target.files[0]);
                };
            });

        },
        controller: 'FileUploadCtrl',
        template:
                '<span class="btn btn-success fileinput-button">' +
                '<i class="glyphicon glyphicon-plus"></i>' +
                '<span>Replace Image</span>' +
                '<input type="file" accept="image/*" name="files[]" multiple="">' +
                '</span>',
        restrict: 'E'

    };
});

InformationsquelleAutor asiop

Für mehrere input-Dateien mit lodash oder Unterstrich:

.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                return _.map(changeEvent.target.files, function(file){
                  scope.fileread = [];
                  var reader = new FileReader();
                  reader.onload = function (loadEvent) {
                      scope.$apply(function () {
                          scope.fileread.push(loadEvent.target.result);
                      });
                  }
                  reader.readAsDataURL(file);
                });
            });
        }
    }
}]);

InformationsquelleAutor Uelb

function filesModelDirective(){
  return {
    controller: function($parse, $element, $attrs, $scope){
      var exp = $parse($attrs.filesModel);
      $element.on('change', function(){
        exp.assign($scope, this.files[0]);
        $scope.$apply();
      });
    }
  };
}
app.directive('filesModel', filesModelDirective);

Ein dickes Lob für die Rücksendung der Datei - Objekt. Die anderen Richtlinien, die konvertieren es zu einer DataURL machen es schwierig für die Controller, die die Datei hochladen möchten.

InformationsquelleAutor coder000001

Ich zu tun hatte, gleich auf mehrere Eingaben, so dass ich aktualisiert wird @Endy Tjahjono Methode.
Es gibt ein array mit allen gelesenen Dateien.

  .directive("fileread", function () {
    return {
      scope: {
        fileread: "="
      },
      link: function (scope, element, attributes) {
        element.bind("change", function (changeEvent) {
          var readers = [] ,
              files = changeEvent.target.files ,
              datas = [] ;
          for ( var i = 0 ; i < files.length ; i++ ) {
            readers[ i ] = new FileReader();
            readers[ i ].onload = function (loadEvent) {
              datas.push( loadEvent.target.result );
              if ( datas.length === files.length ){
                scope.$apply(function () {
                  scope.fileread = datas;
                });
              }
            }
            readers[ i ].readAsDataURL( files[i] );
          }
        });

      }
    }
  });

InformationsquelleAutor Hugo

Musste ich ändern, Endy-Richtlinie, so dass ich bekommen kann Zuletzt Geändert, lastModifiedDate, name, Größe, Typ und Daten, als auch in der Lage sein, um eine Reihe von Dateien. Für diejenigen von Euch, die benötigt diesen extra-features, hier gehen Sie.

UPDATE:
Ich habe einen Fehler gefunden, wo, wenn Sie wählen Sie die Datei(en) und gehen Sie dann zu wählen Sie wieder, aber stattdessen Abbrechen, die Dateien werden nie deaktiviert wie es scheint. Also ich aktualisierte mein code um das zu beheben.

 .directive("fileread", function () {
        return {
            scope: {
                fileread: "="
            },
            link: function (scope, element, attributes) {
                element.bind("change", function (changeEvent) {
                    var readers = [] ,
                        files = changeEvent.target.files ,
                        datas = [] ;
                    if(!files.length){
                        scope.$apply(function () {
                            scope.fileread = [];
                        });
                        return;
                    }
                    for ( var i = 0 ; i < files.length ; i++ ) {
                        readers[ i ] = new FileReader();
                        readers[ i ].index = i;
                        readers[ i ].onload = function (loadEvent) {
                            var index = loadEvent.target.index;
                            datas.push({
                                lastModified: files[index].lastModified,
                                lastModifiedDate: files[index].lastModifiedDate,
                                name: files[index].name,
                                size: files[index].size,
                                type: files[index].type,
                                data: loadEvent.target.result
                            });
                            if ( datas.length === files.length ){
                                scope.$apply(function () {
                                    scope.fileread = datas;
                                });
                            }
                        };
                        readers[ i ].readAsDataURL( files[i] );
                    }
                });

            }
        }
    });

InformationsquelleAutor Parley Hammon

Wenn Sie wollen etwas ein wenig mehr elegant/integriert, können Sie eine Dekorateur zu erweitern, die input Richtlinie mit Unterstützung für type=file. Der wichtigste VORBEHALT zu beachten ist, dass diese Methode funktioniert nicht im IE9 seit IE9 nicht implementieren der Datei-API. Mit Hilfe von JavaScript upload von Binär-Daten, unabhängig von Art via XHR ist einfach nicht möglich nativ in IE9 oder älter (Verwendung von ActiveXObject Zugriff auf das lokale Dateisystem nicht zählen, da die Verwendung von ActiveX ist nur zu Fragen, für Sicherheit sorgen).

Diese exakte Methode erfordert auch eine AngularJS 1.4.x oder später, aber Sie können diese anpassen zu verwenden $provide.decorator eher als angular.Module.decorator - ich schrieb diese gist um zu demonstrieren, wie es zu tun, während in übereinstimmung mit John Papa ' s AngularJS style guide:

(function() {
    'use strict';

    /**
    * @ngdoc input
    * @name input[file]
    *
    * @description
    * Adds very basic support for ngModel to `input[type=file]` fields.
    *
    * Requires AngularJS 1.4.x or later. Does not support Internet Explorer 9 - the browser's
    * implementation of `HTMLInputElement` must have a `files` property for file inputs.
    *
    * @param {string} ngModel
    *  Assignable AngularJS expression to data-bind to. The data-bound object will be an instance
    *  of {@link https://developer.mozilla.org/en-US/docs/Web/API/FileList `FileList`}.
    * @param {string=} name Property name of the form under which the control is published.
    * @param {string=} ngChange
    *  AngularJS expression to be executed when input changes due to user interaction with the
    *  input element.
    */
    angular
        .module('yourModuleNameHere')
        .decorator('inputDirective', myInputFileDecorator);

    myInputFileDecorator.$inject = ['$delegate', '$browser', '$sniffer', '$filter', '$parse'];
    function myInputFileDecorator($delegate, $browser, $sniffer, $filter, $parse) {
        var inputDirective = $delegate[0],
            preLink = inputDirective.link.pre;

        inputDirective.link.pre = function (scope, element, attr, ctrl) {
            if (ctrl[0]) {
                if (angular.lowercase(attr.type) === 'file') {
                    fileInputType(
                        scope, element, attr, ctrl[0], $sniffer, $browser, $filter, $parse);
                } else {
                    preLink.apply(this, arguments);
                }
            }
        };

        return $delegate;
    }

    function fileInputType(scope, element, attr, ctrl, $sniffer, $browser, $filter, $parse) {
        element.on('change', function (ev) {
            if (angular.isDefined(element[0].files)) {
                ctrl.$setViewValue(element[0].files, ev && ev.type);
            }
        })

        ctrl.$isEmpty = function (value) {
            return !value || value.length === 0;
        };
    }
})();

Warum ist das nicht in Erster Linie getan? AngularJS-support ist zu erreichen, nur so weit zurück wie der IE9. Wenn Sie nicht einverstanden mit dieser Entscheidung und denke, Sie sollten einfach dieses sowieso, dann springt der Wagen an Angular 2+, weil besser moderne Unterstützung ist buchstäblich, warum Eckig 2 vorhanden ist.

Das Problem ist (wie bereits erwähnt), dass ohne die Datei-api
unterstützen tut dies richtig ist schlechterdings nicht den Kern unserer
baseline wird in IE9 und polyfilling das Zeug ist aus der Frage
für Kern.

Zusätzlich zu lösen versucht, zu dieser Eingabe in einer Weise, die nicht
cross-browser kompatibel macht es nur schwieriger für 3rd-party-Lösungen,
die haben jetzt zu kämpfen/deaktivieren/umgehen des core-Lösung.

...

Werde ich, um diese zu schließen, als wir gerade geschlossen #1236. Winkel-2 wird
bauen zur Unterstützung moderner Browser und Datei-Unterstützung
leicht verfügbar.

InformationsquelleAutor p0lar_bear

-1

Versuchen, diese,dies ist für mich arbeiten in angular JS

    let fileToUpload = `${documentLocation}/${documentType}.pdf`;
    let absoluteFilePath = path.resolve(__dirname, fileToUpload);
    console.log(`Uploading document ${absoluteFilePath}`);
    element.all(by.css("input[type='file']")).sendKeys(absoluteFilePath);

InformationsquelleAutor RRR

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Arbeiten Demo der Richtlinie, das Funktioniert mit ng-model

Aktivieren <input type="file"> arbeiten mit ng-model

Arbeiten Demo der Richtlinie, das Funktioniert mit `ng-model`

Aktivieren `<input type="file">` arbeiten mit `ng-model`