281

Próbowałem użyć modelu ng na znaczniku wejściowym z plikiem typu:

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

Ale po wybraniu pliku w kontrolerze $ scope.vm.uploadme jest nadal niezdefiniowany.

Jak uzyskać wybrany plik w moim kontrolerze?

angularjs angularjs-ng-model angularjs-fileupload Endy Tjahjono
źródło

3

Zobacz stackoverflow.com/a/17923521/135114 , zwłaszcza cytowany przykład online na stronie jsfiddle.net/danielzen/utp7j

Daryn

Uważam, że zawsze musisz określić właściwość name w elemencie HTML podczas korzystania z ngModel.

Sam

327

Stworzyłem obejście z dyrektywą:

.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]);
            });
        }
    }
}]);

Tag wejściowy staje się:

<input type="file" fileread="vm.uploadme" />

Lub jeśli potrzebna jest tylko definicja pliku:

.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;
                });
            });
        }
    }
}]);

Endy Tjahjono
źródło

4

Używam uploadme jako src w tagu img, więc widzę, że ustawia go dyrektywa. Jednak jeśli spróbuję pobrać go z kontrolera za pomocą $ scope.uploadme, jest on „niezdefiniowany”. Jednak mogę ustawić uploadme z kontrolera. Na przykład $ scope.uploadme = "*" powoduje zniknięcie obrazu.

Per Quested Aronsson,

5

Problem polega na tym, że dyrektywa tworzy childScope i ustawia uploadme w tym zakresie. Oryginalny (nadrzędny) zakres ma również plik uploadme, na który childScope nie ma wpływu. Mogę zaktualizować uploadme w HTML z dowolnego zakresu. Czy jest jakiś sposób, aby w ogóle uniknąć tworzenia childScope?

Per Quested Aronsson

4

@AlexC cóż, pytanie dotyczyło niedziałania modelu ng, a nie przesyłania plików :) W tym czasie nie musiałem przesyłać pliku. Ale ostatnio nauczyłem się, jak przesyłać pliki z tego samouczka egghead.io .

Endy Tjahjono

10

nie zapomnij o $ scope. $ on ('$ destory', function () {element.unbind ("change");}

Nawlbergs

2

Mam pytanie… Czy to nie jest zbyt skomplikowane w porównaniu do zwykłego javascript i HTML? Poważnie, naprawdę musisz zrozumieć AngularJS, aby dojść do tego rozwiązania ... i wygląda na to, że mógłbym zrobić to samo ze zdarzeniem javascript. Po co robić to w Angular, a nie w zwykły JS?

AFP_555

53

Korzystam z tej dyrektywy:

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
});

i wywołaj to w ten sposób:

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

Właściwość (editItem.editItem._attachments_uri.image) zostanie wypełniona zawartością pliku wybranego jako data-uri (!).

Pamiętaj, że ten skrypt niczego nie załaduje. Zapełni on tylko Twój model zawartością pliku zakodowanego w pliku danych i danych (base64).

Sprawdź działające demo tutaj: http://plnkr.co/CMiHKv2BEidM9SShm9Vv

Elmer
źródło

4

Wygląda obiecująco, czy możesz wyjaśnić logikę kodu i skomentować kompatybilność przeglądarki (głównie IE i przeglądarka non-fileAPI)?

Oleg Belousov

Ponadto, zgodnie z moim zrozumieniem, jeśli ustawię nagłówek typu treści żądania AJAX na niezdefiniowany i spróbuję wysłać takie pole do serwera, angular prześle je, zakładając, że przeglądarka obsługuje fileAPI, jestem Mam rację?

Oleg Belousov

@OlegTikhonov nie masz racji! Ten skrypt nic nie wyśle. Odczyta wybrany plik jako ciąg Base64 i zaktualizuje model o ten ciąg.

Elmer

@Elmer Tak, rozumiem, mam na myśli to, że wysyłając formularz zawierający pole pliku (względną ścieżkę do pliku na komputerze użytkownika w obiekcie FileAPI), możesz ustawić kątowe przesyłanie pliku za pomocą żądania XHR ustawiając nagłówek typu zawartości na niezdefiniowany

Oleg Belousov

1

Jaki jest cel overwritting ngModel„s $renderfunkcję?

sp00m

39

Jak włączyć `<input type="file">`pracę z`ng-model`

Demonstracja robocza dyrektywy, która działa `ng-model`

Podstawowa ng-modeldyrektywa nie działa po <input type="file">wyjęciu z pudełka.

Dyrektywa ta pozwala na zlecenie ng-modeli ma dodatkową zaletę umożliwienia ng-change, ng-requiredoraz ng-formwskazówki do pracy z <input type="file">.

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);
      })
    }
  }
});

<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>

Rozwiń fragment kodu

georgeawg
źródło

Możesz użyć warunku, aby sprawdzić, czy nie ma wybranych plików, model-nieokreślony **** if (files.length> 0) {ngModel. $ SetViewValue (pliki); } else {ngModel. $ setViewValue (undefined); }

Farshad Kazemi

Jak uzyskać dane z pliku? I jakich innych atrybutów możemy użyć, takich jak {{file.name}}

Adarsh Singh

1

@AdarshSingh Zobacz MDN Web API Reference - Plik i MDN Reference - Korzystanie z plików z aplikacji internetowych

georgeawg

26

To jest dodatek do rozwiązania @ endy-tjahjono.

W końcu nie byłem w stanie uzyskać wartości uploadme z zakresu. Mimo że uploadme w HTML został wyraźnie zaktualizowany przez dyrektywę, nadal nie mogłem uzyskać dostępu do jego wartości przez $ scope.uploadme. Byłem jednak w stanie ustawić jego wartość z zakresu. Tajemnicze, prawda ..?

Jak się okazało, zakres potomny został utworzony przez dyrektywę, a zakres potomny miał własny uploadme .

Rozwiązaniem było użycie obiektu zamiast prymitywu do utrzymania wartości uploadme .

W kontrolerze mam:

$scope.uploadme = {};
$scope.uploadme.src = "";

oraz w HTML:

 <input type="file" fileread="uploadme.src"/>
 <input type="text" ng-model="uploadme.src"/>

Brak zmian w dyrektywie.

Teraz wszystko działa zgodnie z oczekiwaniami. Mogę pobrać wartość uploadme.src z mojego kontrolera za pomocą $ scope.uploadme.

Per Quested Aronsson
źródło

1

Tak, właśnie o to chodzi.

Per Quested Aronsson

1

Potwierdzam to samo doświadczenie; bardzo ładne debugowanie i wyjaśnienie. Nie jestem pewien, dlaczego dyrektywa tworzy własny zakres.

Adam Casey,

Alternatywnie, deklaracja wbudowana:$scope.uploadme = { src: '' }

maxathousand

9

Cześć chłopaki, stworzyłem dyrektywę i zarejestrowałem się na altanie.

ta biblioteka pomoże ci w modelowaniu pliku wejściowego, nie tylko zwróci dane pliku, ale także plik danych lub plik bazowy 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/

Nadzieja ci pomoże

yozawiratama
źródło

jak go używać za pomocą $ scope? Próbowałem tego użyć, ale podczas debugowania nie byłem zdefiniowany.

Gujarat Santana,

1

Nice Work yozawiratama! Działa dobrze. I @GujaratSantana, jeśli <input type = "file" ng-file-model = "myDocument" /> to po prostu użyj $ scope.myDocument.name lub ogólnie $ scope.myDocument. <Dowolna właściwość> gdzie właściwość jest jedną z [„lastModified”, „lastModifiedDate”, „name”, „size”, „type”, „data”]

Jay Dharmendra Solanki

nie można zainstalować za pomocą altany

Pimgd

jak użytkownik do przesyłania wielu plików?

aldrien.h

reader.readAsDataURLMetoda jest przestarzała. Nowoczesny kod używa URL.create ObjectURL () .

georgeawg

4

Jest to nieznacznie zmodyfikowana wersja, która pozwala określić nazwę atrybutu w zakresie, tak jak w przypadku modelu ng, użycie:

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

Dyrektywa:

.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'

    };
});

asiop
źródło

3

W przypadku wprowadzania wielu plików przy użyciu lodash lub podkreślenia:

.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);
                });
            });
        }
    }
}]);

Uelb
źródło

3

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);

koder000001
źródło

Wyrazy uznania za zwrócenie obiektu pliku . Inne dyrektywy, które konwertują go na DataURL, utrudniają kontrolerom, którzy chcą załadować plik.

georgeawg

2

Musiałem zrobić to samo na wielu wejściach, więc zaktualizowałem metodę @Endy Tjahjono. Zwraca tablicę zawierającą wszystkie odczytane pliki.

  .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] );
          }
        });

      }
    }
  });

Hugo
źródło

1

Musiałem zmodyfikować dyrektywę Endy, aby uzyskać Last Last, LastModifiedDate, nazwę, rozmiar, typ i dane, a także móc uzyskać tablicę plików. Dla tych z Was, którzy potrzebowali tych dodatkowych funkcji, proszę bardzo.

AKTUALIZACJA: Znalazłem błąd, w którym jeśli wybierzesz plik (i), a następnie przejdziesz do wyboru ponownie, ale zamiast tego anulujesz, pliki nigdy nie są usuwane tak, jak się wydaje. Zaktualizowałem więc mój kod, aby to naprawić.

 .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] );
                    }
                });

            }
        }
    });

Parley Hammon
źródło

1

Jeśli chcesz czegoś bardziej eleganckiego / zintegrowanego, możesz użyć dekoratora do rozszerzenia inputdyrektywy z obsługą type=file. Należy pamiętać, że ta metoda nie będzie działać w IE9, ponieważ IE9 nie implementuje interfejsu API plików . Używanie JavaScript do przesyłania danych binarnych niezależnie od typu za pośrednictwem XHR po prostu nie jest możliwe natywnie w IE9 lub wcześniejszym (użycie ActiveXObjectdo uzyskania dostępu do lokalnego systemu plików nie liczy się, ponieważ używanie ActiveX wymaga jedynie problemów z bezpieczeństwem).

Ta dokładna metoda wymaga również AngularJS 1.4.x lub nowszej, ale możesz być w stanie dostosować to do użycia $provide.decoratorzamiast angular.Module.decorator- Napisałem tę listę, aby zademonstrować, jak to zrobić, przestrzegając przewodnika stylu AngularJS Johna Papy :

(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;
        };
    }
})();

Dlaczego tego nie zrobiono? Obsługa AngularJS ma sięgać tak daleko jak IE9. Jeśli nie zgadzasz się z tą decyzją i uważasz, że i tak powinni ją po prostu włożyć, przeskocz wóz na Angular 2+, ponieważ lepsze nowoczesne wsparcie jest dosłownie powodem, dla którego Angular 2 istnieje.

Problemem jest (jak wspomniano wcześniej), że bez obsługi interfejsu API robienie tego właściwie nie jest możliwe dla rdzenia, biorąc pod uwagę naszą linię bazową, tj. IE9 i wielokrotne wypełnianie tych rzeczy nie wchodzi w rachubę dla rdzenia.

Dodatkowo próba obsłużenia tych danych wejściowych w sposób niezgodny z różnymi przeglądarkami utrudnia tylko rozwiązania innych firm, które muszą teraz walczyć / wyłączać / obejść podstawowe rozwiązanie.

...

Zamierzam to zamknąć, gdy zamknęliśmy # 1236. Angular 2 jest budowany do obsługi nowoczesnych przeglądarek i dzięki temu obsługa plików będzie łatwo dostępna.

p0lar_bear
źródło

-2

Spróbuj, to działa na mnie w kątowym 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);

RRR
źródło

ng-model dla `<input type =„ file ”/>` (z dyrektywą DEMO)

Odpowiedzi:

Jak włączyć `<input type="file">`pracę z`ng-model`

Demonstracja robocza dyrektywy, która działa `ng-model`

ng-model dla `<input type =„ file ”/>` (z dyrektywą DEMO)

Odpowiedzi:

Jak włączyć <input type="file">pracę zng-model

Demonstracja robocza dyrektywy, która działa ng-model

Jak włączyć `<input type="file">`pracę z`ng-model`

Demonstracja robocza dyrektywy, która działa `ng-model`