ng-модель для `<input type =“ file ”/>` (с директивой DEMO)

252

Я попытался использовать ng-модель для входного тега с файлом типа:

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

Но после выбора файла в контроллере $scope.vm.uploadme все еще undefined.

Как получить выбранный файл в контроллере?

  • 3
    См. Stackoverflow.com/a/17923521/135114 , особенно приведенный пример в Интернете по адресу jsfiddle.net/danielzen/utp7j
  • 0
    Я считаю, что вам всегда нужно указывать свойство name в элементе html при использовании ngModel.
Теги:
angularjs-ng-model
angularjs-fileupload

12 ответов

302
Лучший ответ

Я создал обходной путь с директивой:

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

И тег ввода будет:

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

Или, если требуется только определение файла:

.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;
                });
            });
        }
    }
}]);
Поделиться
  • 0
    Как получить доступ к данным изображения с контроллера?
  • 0
    @PerQuestedAronsson через $ scope.uploadme (как в вопросе).
Показать ещё 17 комментариев
53

Я использую эту директиву:

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

и вызовите его следующим образом:

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

Свойство (editItem.editItem._attachments_uri.image) будет заполнено содержимым файла, который вы выбираете как data-uri (!).

Обратите внимание, что этот script ничего не загрузит. Он заполнит вашу модель только содержимым вашего файла, закодированного в виде данных, - uri (base64).

Ознакомьтесь с рабочей демонстрацией здесь: http://plnkr.co/CMiHKv2BEidM9SShm9Vv

Поделиться
  • 4
    Выглядите многообещающе, не могли бы вы объяснить логику кода и прокомментировать совместимость браузера (в основном IE и не-fileAPI-браузер)?
  • 0
    Кроме того, насколько я понимаю, если я установлю заголовок типа содержимого запроса AJAX на неопределенное и попытаюсь отправить такое поле на сервер, angular загрузит его, предполагая, что браузер поддерживает fileAPI. Я исправлю?
Показать ещё 10 комментариев
28

Это дополнение к решению @endy-tjahjono.

В итоге я не смог получить значение uploadme из области. Несмотря на то, что uploadme в HTML было заметно обновлено директивой, я все равно не мог получить доступ к его значению по $scope.uploadme. Тем не менее, я смог установить его ценность из области. Таинственный, правый..?

Как оказалось, в директиве была создана дочерняя область, а у дочернего объекта была собственная функция uploadme.

Решением было использование объекта, а не примитива, для хранения значения uploadme.

В контроллере у меня есть:

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

и в HTML:

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

В директиве изменений нет.

Теперь все работает, как и ожидалось. Я могу захватить значение uploadme.src с моего контроллера, используя $scope.uploadme.

Поделиться
  • 4
    Может быть, это похоже на вашу проблему? egghead.io/lessons/angularjs-the-dot
  • 1
    Да, это именно так.
Показать ещё 2 комментария
19

Рабочая демонстрация директивы, которая работает с ng-model

Как включить <input type="file"> для работы с ng-model

Основная директива ng-model не работает с <input type="file" из коробки.

Эта пользовательская директива включает ng-model и имеет дополнительное преимущество: она позволяет директивам ng-change, ng-required и ng-form работать с <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>
Поделиться
  • 0
    Вы можете использовать условие, чтобы проверить, нет ли выбранных файлов, ng-модель будет неопределенной **** if (files.length> 0) {ngModel. $ SetViewValue (files); } else {ngModel. $ setViewValue (undefined); }
8

Привет, ребята, я создаю директиву и зарегистрируюсь на беседке.

этот lib поможет вам моделировать входной файл, а не только возвращать данные файла, но также файл dataurl или 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/

Надежда поможет вам

Поделиться
  • 0
    как использовать его с помощью $ scope? Я пытался использовать это, но получил неопределенный при отладке.
  • 1
    Хорошая работа yozawiratama! Работает хорошо. И @GujaratSantana, если <input type = "file" ng-file-model = "myDocument" />, тогда просто используйте $ scope.myDocument.name или вообще $ scope.myDocument. <Любое свойство>, где свойство является одним из ["lastModified", "lastModifiedDate", "name", "size", "type", "data"]
Показать ещё 2 комментария
4

Это немного измененная версия, которая позволяет указать имя атрибута в области, как и с ng-model, использование:

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

Директива

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

    };
});
Поделиться
3

Для ввода нескольких файлов с использованием lodash или подчеркивания:

.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);
                });
            });
        }
    }
}]);
Поделиться
2 

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);
Поделиться
2

Мне приходилось делать то же самое на нескольких входах, поэтому я обновил метод @Endy Tjahjono. Он возвращает массив, содержащий все прочитанные файлы.

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

      }
    }
  });
Поделиться
1

Мне пришлось модифицировать директиву Endy, чтобы получить Last Modified, lastModifiedDate, имя, размер, тип и данные, а также получить массив файлов. Для тех из вас, кому нужны эти дополнительные функции, вы здесь.

UPDATE: Я нашел ошибку, если вы выберете файл (ы), а затем перейдите к выбору снова, но вместо этого отмените, файлы никогда не будут отменены, как кажется. Поэтому я обновил свой код, чтобы исправить это.

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

            }
        }
    });
Поделиться
0

Если вы хотите что-то более элегантное/интегрированное, вы можете использовать декоратор для расширения директивы input с поддержкой type=file. Основное предостережение, о котором следует помнить, это то, что этот метод не будет работать в IE9, так как IE9 не реализовывал File API. Использование JavaScript для загрузки двоичных данных независимо от типа через XHR изначально невозможно в IE9 или более ранних ActiveXObject (использование ActiveXObject для доступа к локальной файловой системе не считается, так как использование ActiveX просто вызывает проблемы с безопасностью).

Этот точный метод также требует AngularJS 1.4.x или более поздней версии, но вы можете адаптировать его для использования $provide.decorator а не angular.Module.decorator - этот фрагмент кода был написан для соответствия руководству по стилю John Papa AngularJS:

(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', scpInputFileDecorator);

    scpInputFileDecorator.$inject = ['$delegate', '$browser', '$sniffer', '$filter', '$parse'];
    function scpInputFileDecorator($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;
        };
    }
})();

Почему это не было сделано в первую очередь? Поддержка AngularJS предназначена только для IE9. Если вы не согласны с этим решением и считаете, что в любом случае им следовало бы просто вставить это, переходите на Angular 2+, потому что лучшая современная поддержка - это буквально то, почему существует Angular 2.

Проблема в том, что (как уже упоминалось ранее), что без поддержки файлового API, сделать это правильно для ядра невозможно, учитывая, что наша базовая линия - IE9, а многопоточность - вне всякого сомнения для ядра.

Кроме того, попытка обработать этот ввод так, чтобы он не был совместим с разными браузерами, только усложняет решения сторонних производителей, которым теперь приходится бороться/отключать/обходить основное решение.

...

Я собираюсь закрыть это так же, как мы закрыли # 1236. Angular 2 собирается для поддержки современных браузеров, и с этим поддержка файлов будет легко доступна.

Поделиться
-2

Попробуйте это, это работает для меня в угловой 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);
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню