Jestem nowy w angular. Próbuję odczytać przesłaną ścieżkę pliku z pola „pliku” HTML, ilekroć w tym polu nastąpi „zmiana”. Jeśli używam „onChange”, to działa, ale kiedy używam go pod kątem, używając „ng-change”, to nie działa.

<script>
   var DemoModule = angular.module("Demo",[]);
   DemoModule .controller("form-cntlr",function($scope){
   $scope.selectFile = function()
   {
        $("#file").click();
   }
   $scope.fileNameChaged = function()
   {
        alert("select file");
   }
});
</script>

<div ng-controller="form-cntlr">
    <form>
         <button ng-click="selectFile()">Upload Your File</button>
         <input type="file" style="display:none" 
                          id="file" name='file' ng-Change="fileNameChaged()"/>
    </form>  
</div>

fileNameChaged () nigdy nie wywołuje. Firebug również nie pokazuje żadnego błędu.

Brak obsługi wiązania dla kontroli przesyłania plików

https://github.com/angular/angular.js/issues/1375

<div ng-controller="form-cntlr">
        <form>
             <button ng-click="selectFile()">Upload Your File</button>
             <input type="file" style="display:none" 
                id="file" name='file' onchange="angular.element(this).scope().fileNameChanged(this)" />
        </form>  
    </div>

zamiast

 <input type="file" style="display:none" 
    id="file" name='file' ng-Change="fileNameChanged()" />

możesz spróbować

<input type="file" style="display:none" 
    id="file" name='file' onchange="angular.element(this).scope().fileNameChanged()" />

Uwaga: wymaga to, aby aplikacja kątowa zawsze znajdowała się w trybie debugowania . To nie zadziała w kodzie produkcyjnym, jeśli tryb debugowania jest wyłączony.

i w twojej funkcji zmienia się zamiast

$scope.fileNameChanged = function() {
   alert("select file");
}

możesz spróbować

$scope.fileNameChanged = function() {
  console.log("select file");
}

Poniżej znajduje się jeden działający przykład przesyłania plików z przesyłaniem plików metodą przeciągnij i upuść http://jsfiddle.net/danielzen/utp7j/

Informacje o przesyłaniu plików kątowych

Adres URL do przesyłania plików AngularJS w ASP.Net

http://cgeers.com/2013/05/03/angularjs-file-upload/

AngularJs natywne przesyłanie wielu plików z postępem w NodeJS

http://jasonturim.wordpress.com/2013/09/12/angularjs-native-multi-file-upload-with-progress/

ngUpload - usługa AngularJS do przesyłania plików przy użyciu iframe

http://ngmodules.org/modules/ngUpload

Podjąłem małą dyrektywę, aby nasłuchiwać zmian wprowadzanych plików.

Zobacz JSFiddle

view.html:

<input type="file" custom-on-change="uploadFile">

controller.js:

app.controller('myCtrl', function($scope){
    $scope.uploadFile = function(event){
        var files = event.target.files;
    };
});     

dyrektywa.js:

app.directive('customOnChange', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var onChangeHandler = scope.$eval(attrs.customOnChange);
      element.on('change', onChangeHandler);
      element.on('$destroy', function() {
        element.off();
      });

    }
  };
});

Jest to udoskonalenie niektórych innych wokół, dane zostaną skończone w modelu ng, co zwykle jest tym, czego chcesz.

Znaczniki (wystarczy utworzyć plik danych atrybutu, aby dyrektywa mogła go znaleźć)

<input
    data-file
    id="id_image" name="image"
    ng-model="my_image_model" type="file">

JS

app.directive('file', function() {
    return {
        require:"ngModel",
        restrict: 'A',
        link: function($scope, el, attrs, ngModel){
            el.bind('change', function(event){
                var files = event.target.files;
                var file = files[0];

                ngModel.$setViewValue(file);
                $scope.$apply();
            });
        }
    };
});

Najprościej jest napisać własną dyrektywę, aby powiązać zdarzenie „zmień”. Informuję, że IE9 nie obsługuje FormData, więc nie można tak naprawdę pobrać obiektu pliku ze zdarzenia zmiany.

Możesz użyć biblioteki przesyłania plików ng, która już obsługuje IE z polifillem FileAPI i uprościć wysyłanie pliku na serwer. W tym celu wykorzystuje dyrektywę.

<script src="angular.min.js"></script>
<script src="ng-file-upload.js"></script>

<div ng-controller="MyCtrl">
  <input type="file" ngf-select="onFileSelect($files)" multiple>
</div>

JS:

//inject angular file upload directive.
angular.module('myApp', ['ngFileUpload']);

var MyCtrl = [ '$scope', 'Upload', function($scope, Upload) {
  $scope.onFileSelect = function($files) {
    //$files: an array of files selected, each file has name, size, and type.
    for (var i = 0; i < $files.length; i++) {
      var $file = $files[i];
      Upload.upload({
        url: 'my/upload/url',
        data: {file: $file}
      }).then(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
      }); 
    }
  }
}];

Rozszerzyłem pomysł @Stuart Axon, aby dodać dwukierunkowe wiązanie dla danych wejściowych pliku (tzn. Zezwolić na zresetowanie danych wejściowych poprzez zresetowanie wartości modelu z powrotem do wartości null):

app.directive('bindFile', [function () {
    return {
        require: "ngModel",
        restrict: 'A',
        link: function ($scope, el, attrs, ngModel) {
            el.bind('change', function (event) {
                ngModel.$setViewValue(event.target.files[0]);
                $scope.$apply();
            });

            $scope.$watch(function () {
                return ngModel.$viewValue;
            }, function (value) {
                if (!value) {
                    el.val("");
                }
            });
        }
    };
}]);

Próbny

Podobnie jak w przypadku niektórych innych dobrych odpowiedzi tutaj, napisałem dyrektywę, aby rozwiązać ten problem, ale ta implementacja dokładniej odzwierciedla kątowy sposób dołączania zdarzeń.

Możesz użyć dyrektywy w następujący sposób:

HTML

<input type="file" file-change="yourHandler($event, files)" />

Jak widać, możesz wstrzyknąć wybrane pliki do procedury obsługi zdarzeń, tak jak wstrzyknąłbyś obiekt $ event do dowolnej procedury obsługi zdarzeń ng.

JavaScript

angular
  .module('yourModule')
  .directive('fileChange', ['$parse', function($parse) {

    return {
      require: 'ngModel',
      restrict: 'A',
      link: function ($scope, element, attrs, ngModel) {

        // Get the function provided in the file-change attribute.
        // Note the attribute has become an angular expression,
        // which is what we are parsing. The provided handler is 
        // wrapped up in an outer function (attrHandler) - we'll 
        // call the provided event handler inside the handler()
        // function below.
        var attrHandler = $parse(attrs['fileChange']);

        // This is a wrapper handler which will be attached to the
        // HTML change event.
        var handler = function (e) {

          $scope.$apply(function () {

            // Execute the provided handler in the directive's scope.
            // The files variable will be available for consumption
            // by the event handler.
            attrHandler($scope, { $event: e, files: e.target.files });
          });
        };

        // Attach the handler to the HTML change event 
        element[0].addEventListener('change', handler, false);
      }
    };
  }]);

Niniejsza dyrektywa przekazuje również wybrane pliki:

/**
 *File Input - custom call when the file has changed
 */
.directive('onFileChange', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var onChangeHandler = scope.$eval(attrs.onFileChange);

      element.bind('change', function() {
        scope.$apply(function() {
          var files = element[0].files;
          if (files) {
            onChangeHandler(files);
          }
        });
      });

    }
  };
});

HTML, jak go używać:

<input type="file" ng-model="file" on-file-change="onFilesSelected">

W moim kontrolerze:

$scope.onFilesSelected = function(files) {
     console.log("files - " + files);
};

Polecam stworzyć dyrektywę

<input type="file" custom-on-change handler="functionToBeCalled(params)">

app.directive('customOnChange', [function() {
        'use strict';

        return {
            restrict: "A",

            scope: {
                handler: '&'
            },
            link: function(scope, element){

                element.change(function(event){
                    scope.$apply(function(){
                        var params = {event: event, el: element};
                        scope.handler({params: params});
                    });
                });
            }

        };
    }]);

ta dyrektywa może być używana wiele razy, używa własnego zakresu i nie zależy od zakresu nadrzędnego. Możesz również podać kilka parametrów funkcji obsługi. Funkcja modułu obsługi zostanie wywołana z obiektem zakresu, który był aktywny po zmianie danych wejściowych. $ Apply aktualizuje Twój model za każdym razem, gdy wywoływane jest zdarzenie zmiany

Najprostsza wersja Angular jqLite.

JS:

.directive('cOnChange', function() {
    'use strict';

    return {
        restrict: "A",
        scope : {
            cOnChange: '&'
        },
        link: function (scope, element) {
            element.on('change', function () {
                scope.cOnChange();
        });
        }
    };
});

HTML:

<input type="file" data-c-on-change="your.functionName()">

Demonstracja robocza dyrektywy „file-input”, która działa z ng-change¹

Aby <input type=file>element działał zgodnie z dyrektywą ng-change , potrzebuje niestandardowej dyrektywy, która działa z dyrektywą ng-model .

<input type="file" files-input ng-model="fileList" 
       ng-change="onInputChange()" multiple />

DEMO

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

.controller("ctrl", function($scope) {
     $scope.onInputChange = function() {
         console.log("input change");
     };
})

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app" ng-controller="ctrl">
    <h1>AngularJS Input `type=file` Demo</h1>
    
    <input type="file" files-input ng-model="fileList" 
           ng-change="onInputChange()" multiple />
    
    <h2>Files</h2>
    <div ng-repeat="file in fileList">
      {{file.name}}
    </div>
  </body>

Zbyt kompletne rozwiązanie oparte na:

`onchange="angular.element(this).scope().UpLoadFile(this.files)"`

Prosty sposób na ukrycie pola wejściowego i zastąpienie go obrazem, tutaj po rozwiązaniu, które również wymagają hackowania kątowego, ale wykonują zadanie [TriggerEvent nie działa zgodnie z oczekiwaniami]

Rozwiązanie:

• umieść pole wejściowe na wyświetlaczu: brak [pole wejściowe istnieje w DOM, ale nie jest widoczne]
• umieść obraz zaraz po nim Na obrazie użyj nb-click (), aby aktywować metodę

Po kliknięciu obrazu zasymuluj działanie DOM „kliknij” w polu wejściowym. Zrobione!

 var tmpl = '<input type="file" id="{{name}}-filein"' + 
             'onchange="angular.element(this).scope().UpLoadFile(this.files)"' +
             ' multiple accept="{{mime}}/*" style="display:none" placeholder="{{placeholder}}">'+
             ' <img id="{{name}}-img" src="{{icon}}" ng-click="clicked()">' +
             '';
   // Image was clicked let's simulate an input (file) click
   scope.inputElem = elem.find('input'); // find input in directive
   scope.clicked = function () {
         console.log ('Image clicked');
         scope.inputElem[0].click(); // Warning Angular TriggerEvent does not work!!!
    };

Zrobiłem to w ten sposób;

<!-- HTML -->
<button id="uploadFileButton" class="btn btn-info" ng-click="vm.upload()">    
<span  class="fa fa-paperclip"></span></button>
<input type="file" id="txtUploadFile" name="fileInput" style="display: none;" />

// self is the instance of $scope or this
self.upload = function () {
   var ctrl = angular.element("#txtUploadFile");
   ctrl.on('change', fileNameChanged);
   ctrl.click();
}

function fileNameChanged(e) {
    console.log(self.currentItem);
    alert("select file");
}

Innym interesującym sposobem nasłuchiwania zmian danych wejściowych pliku jest kontrola nad atrybutem ng-model pliku wejściowego. Oczywiście FileModel to niestandardowa dyrektywa.

Lubię to:

HTML -> <input type="file" file-model="change.fnEvidence">

Kod JS ->

$scope.$watch('change.fnEvidence', function() {
                    alert("has changed");
                });

Mam nadzieję, że może komuś pomóc.

Elementy kątowe (takie jak element główny dyrektywy) są obiektami jQuery [Lite]. Oznacza to, że możemy zarejestrować detektor zdarzeń w następujący sposób:

link($scope, $el) {
    const fileInputSelector = '.my-file-input'

    function setFile() {
        // access file via $el.find(fileInputSelector).get(0).files[0]
    }

    $el.on('change', fileInputSelector, setFile)
}

To jest delegacja zdarzenia jQuery. Tutaj nasłuchiwanie jest dołączone do elementu głównego dyrektywy. Kiedy zdarzenie zostanie wyzwolone, będzie się przesuwać do zarejestrowanego elementu, a jQuery określi, czy zdarzenie powstało na elemencie wewnętrznym pasującym do zdefiniowanego selektora. Jeśli tak, przewodnik uruchomi ogień.

Korzyści z tej metody to:

• moduł obsługi jest powiązany z elementem $, który zostanie automatycznie wyczyszczony po zniszczeniu zakresu dyrektywy.
• brak kodu w szablonie
• będzie działać, nawet jeśli docelowy delegat (dane wejściowe) nie został jeszcze zrenderowany podczas rejestracji modułu obsługi zdarzeń (na przykład podczas używania ng-iflub ng-switch)

http://api.jquery.com/on/

Możesz po prostu dodać poniższy kod w programie onchange, a on wykryje zmianę. możesz napisać funkcję na X-Click lub coś do usunięcia danych pliku.

document.getElementById(id).value = "";