Я попытался использовать ng-модель для входного тега с файлом типа:
<input type="file" ng-model="vm.uploadme" />
Но после выбора файла в контроллере $scope.vm.uploadme все еще undefined.
Как получить выбранный файл в контроллере?
ng-модель для '<input type = "file"/>' (с директивой DEMO)
Ответ 1
Я создал обходной путь с директивой:
.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;
});
});
}
}
}]);
Ответ 2
Я использую эту директиву:
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
Ответ 3
Это дополнение к решению @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
Рабочая демонстрация директивы, которая работает с 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>Ответ 5
Привет, ребята, я создаю директиву и зарегистрируюсь на беседке.
этот 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/
Надежда поможет вам
Ответ 6
Это немного измененная версия, которая позволяет указать имя атрибута в области, как и с 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'
};
});
Ответ 7
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);
Ответ 8
Для ввода нескольких файлов с использованием 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);
});
});
}
}
}]);
Ответ 9
Мне приходилось делать то же самое на нескольких входах, поэтому я обновил метод @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] );
}
});
}
}
});
Ответ 10
Мне пришлось модифицировать директиву 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] );
}
});
}
}
});
Ответ 11
Если вы хотите что-то более элегантное/интегрированное, вы можете использовать декоратор для расширения директивы 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', 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;
};
}
})();
Почему это не было сделано в первую очередь? Поддержка AngularJS предназначена только для IE9. Если вы не согласны с этим решением и считаете, что в любом случае им следовало бы просто вставить это, переходите на Angular 2+, потому что лучшая современная поддержка - это буквально то, почему существует Angular 2.
Проблема в том, что (как уже упоминалось ранее), что без поддержки файлового API сделать это невозможно для ядра, учитывая, что наша базовая линия - IE9, а полифиллинг - вне ядра.
Кроме того, попытка обработать этот ввод так, чтобы он не был совместим с разными браузерами, только усложняет решения сторонних производителей, которым теперь приходится бороться/отключать/обходить основное решение.
...
Я собираюсь закрыть это так же, как мы закрыли # 1236. Angular 2 собирается для поддержки современных браузеров, и с этим поддержка файлов будет легко доступна.
Ответ 12
Попробуйте это, это работает для меня в угловой 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);