我尝试在带有类型文件的输入标签上使用 ng-model：
<input type="file" ng-model="vm.uploadme" />
但是在选择一个文件后，在控制器中，$scope.vm.uploadme 仍然是未定义的。
如何在我的控制器中获取选定的文件？
问问题
320221 次
13 回答
334
我用指令创建了一个解决方法：
.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;
});
});
}
}
}]);
于 2013-06-12T10:20:48.613 回答
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) 将填充您选择作为数据 uri (!) 的文件的内容。
请注意，此脚本不会上传任何内容。它只会使用您的文件编码和数据 uri（base64）的内容填充您的模型。
在此处查看工作演示：http: //plnkr.co/CMiHKv2BEidM9SShm9Vv
于 2013-10-01T17:04:40.497 回答
46
如何<input type="file">启用ng-model
使用的指令的工作演示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>于 2017-03-28T16:10:19.197 回答
26
这是@endy-tjahjono 解决方案的附录。
我最终无法从范围中获取uploadme的值。即使HTML 中的uploadme已被指令明显更新，我仍然无法通过 $scope.uploadme 访问它的值。不过，我能够从范围设置它的值。神秘，对吧..？
事实证明，该指令创建了一个子范围，并且子范围有自己的uploadme。
解决方案是使用对象而不是原语来保存uploadme的值。
在控制器中我有：
$scope.uploadme = {};
$scope.uploadme.src = "";
在 HTML 中：
<input type="file" fileread="uploadme.src"/>
<input type="text" ng-model="uploadme.src"/>
指令没有变化。
现在，一切都按预期进行。我可以使用 $scope.uploadme 从我的控制器中获取uploadme.src的值。
于 2013-09-20T07:31:15.863 回答
9
我创建了一个指令并在凉亭上注册。
该库将帮助您对输入文件进行建模，不仅返回文件数据，还返回文件 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="
}
于 2015-09-10T17:41:18.607 回答
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'
};
});
于 2014-07-31T11:21:30.460 回答
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);
于 2014-11-12T21:47:09.007 回答
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);
});
});
}
}
}]);
于 2015-03-12T19:36:14.057 回答
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] );
}
});
}
}
});
于 2014-03-08T22:06:05.787 回答
1
如果你想要更优雅/更集成的东西，你可以使用装饰器来扩展input指令并支持type=file. 要记住的主要警告是，由于 IE9 没有实现 File API，因此此方法在 IE9 中不起作用。在 IE9 或更早版本中，使用 JavaScript 上传二进制数据（无论类型如何）在 IE9 或更早版本中根本不可能（使用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 并且填充这些东西对于核心来说是不可能的。
此外，尝试以不跨浏览器兼容的方式处理此输入只会使 3rd 方解决方案变得更加困难，现在必须与核心解决方案作斗争/禁用/解决。
...
就像我们关闭 #1236 一样，我将关闭它。Angular 2 正在构建以支持现代浏览器，并且通过该文件支持将很容易获得。
于 2018-12-14T21:45:14.157 回答
1
我必须修改 Endy 的指令，以便获得 Last Modified、lastModifiedDate、名称、大小、类型和数据，以及能够获得文件数组。对于那些需要这些额外功能的人来说，就可以了。
更新：我发现了一个错误，如果您选择文件然后再次选择但取消，则文件永远不会像它出现的那样被取消选择。所以我更新了我的代码来解决这个问题。
.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] );
}
});
}
}
});
于 2017-06-06T02:48:43.413 回答
0
或者，您可以获取输入并设置 onchange 函数：
<input type="file" id="myFileInput" />
document.getElementById("myFileInput").onchange = function (event) {
console.log(event.target.files);
};
于 2021-03-03T12:37:22.467 回答
-2
试试这个，这在 Angular 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);
于 2017-12-15T12:50:41.033 回答