Я новачок у кутових. Я намагаюся прочитати шлях до завантаженого файлу з поля HTML до файлу кожного разу, коли в цьому полі відбувається "зміна". Якщо я використовую 'onChange', він працює, але коли я використовую його кутовим шляхом, використовуючи 'ng-change', він не працює.

<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 () ніколи не дзвонить. Firebug також не показує помилок.

Немає підтримки для управління завантаженням файлів

https://github.com/angular/angular.js/isissue/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>

замість

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

ви можете спробувати

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

Примітка: для цього потрібно, щоб кутовий додаток завжди знаходився в режимі налагодження . Це не працюватиме у виробничому коді, якщо режим налагодження відключений.

і у вашій функції змінюється замість

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

ви можете спробувати

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

Нижче наведено один робочий приклад завантаження файлів із завантаженням файлу перетягування, який може бути корисним http://jsfiddle.net/danielzen/utp7j/

Інформація про завантаження кутових файлів

URL для завантаження файлу AngularJS в ASP.Net

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

Завантаження багатофайлів AngularJs з ходом роботи з NodeJS

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

ngUpload - Служба AngularJS для завантаження файлів за допомогою iframe

http://ngmodules.org/modules/ngUpload

Я зробив невелику директиву, щоб слухати зміни введення файлів.

Переглянути 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;
    };
});     

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

    }
  };
});

Це уточнення деяких інших навколо, дані перетворюються на ng-модель, яка зазвичай є тим, що ви хочете.

Розмітка (просто створіть файл даних про атрибут, щоб директива змогла його знайти)

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

Чистий спосіб - це написати власну директиву, яка прив'язується до події "зміни". Просто для того, щоб ви знали, що IE9 не підтримує FormData, тому ви не можете дійсно отримати об’єкт файлу від події зміни.

Ви можете використовувати бібліотеку ng-file-upload, яка вже підтримує IE з поліфайлом FileAPI та спрощує розміщення файлу на сервері. Для цього використовується директива.

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

Я розширив ідею @Stuart Axon додати двосторонню прив'язку для введення файлу (тобто дозволити скинути введення шляхом скидання значення моделі назад до нуля):

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

Демо

Як і деякі інші хороші відповіді тут, я написав директиву для вирішення цієї проблеми, але ця реалізація більш ретельно відображає кутовий спосіб приєднання подій.

Ви можете використовувати директиву так:

HTML

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

Як ви бачите, ви можете вставити вибрані файли в обробник подій, як ви б ввели об'єкт $ події в будь-який обробник подій.

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

Ця директива також передає вибрані файли:

/**
 *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, як ним користуватися:

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

У моєму контролері:

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

Рекомендую створити директиву

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

        };
    }]);

ця директива може використовуватися багато разів, вона використовує власну сферу дії і не залежить від батьківської області. Ви також можете надати кілька параметрів функції обробника. Функція обробника буде викликана об'єктом області, який був активним при зміні вводу. $ apply оновлює вашу модель щоразу, коли викликається подія зміни

Найпростіша кутова версія 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()">

Робоча демонстрація директиви "введення файлів", з якою працює ng-change ¹

Щоб змусити <input type=file>елемент працювати директивою ng-change , йому потрібна спеціальна директива, яка працює з ng-моделлю директивою .

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

Занадто повна база рішення на:

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

Простий спосіб приховати поле введення та замінити його зображенням тут, після рішення, яке також вимагає злому на кутовому, але це виконує роботу [TriggerEvent не працює так, як очікувалося]

Рішення:

• розмістити поле введення на дисплеї: жодне [поле введення не існує в DOM, але не видно]
• розмістіть своє зображення відразу після. На зображенні натисніть nb-клавішу (), щоб активувати метод

Після натискання на зображення імітуйте дію DOM 'клік' у полі введення. Et voilà!

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

Я зробив це так;

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

Ще один цікавий спосіб прослуховування змін введення файлів - це перегляд атрибута ng-model вхідного файлу. Звичайно, FileModel - це спеціальна директива.

Подобається це:

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

Код JS ->

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

Сподіваюся, це може комусь допомогти.

Кутові елементи (такі як кореневий елемент директиви) - це об'єкти jQuery [Lite]. Це означає, що ми можемо зареєструвати слухача події так:

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

Це делегація подій jQuery. Тут слухач приєднаний до кореневого елемента директиви. Коли подія запускається, вона піднімається до зареєстрованого елемента, і jQuery визначатиме, чи подія виникла на внутрішньому елементі, що відповідає визначеному селектору. Якщо це станеться, обробник вистрілить.

Перевагами цього методу є:

• обробник пов'язаний з елементом $, який автоматично очиститься при знищенні області директиви.
• в шаблоні немає коду
• буде працювати, навіть якщо цільовий делегат (введення) ще не надано під час реєстрації обробника події (наприклад, під час використання ng-ifабо ng-switch)

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

Ви можете просто додати код нижче в режимі onchange, і він виявить зміни. ви можете написати функцію натисканням X або щось для видалення файлових даних ..

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