我尝试使用ng-model的输入标签类型文件:
<input type="file" ng-model="vm.uploadme" />
但是在选择了一个文件后，在控制器中，$scope.vm。Uploadme仍然没有定义。
我如何在我的控制器中获得所选文件?
当前回答
这是@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"/>
指令没有变化。
现在，一切都像预期的那样。我可以获取uploadme的值。SRC从我的控制器使用$scope.uploadme。
其他回答
我用指令创建了一个变通方法:
.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标签变成:
<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;
});
});
}
}
}]);
这是一个稍微修改过的版本，允许你在作用域中指定属性的名称，就像你在ng-model, usage中所做的一样:
<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'
};
});
如何使<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>
这是@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"/>
指令没有变化。
现在，一切都像预期的那样。我可以获取uploadme的值。SRC从我的控制器使用$scope.uploadme。
如果你想要一些更优雅/集成的东西，你可以使用一个装饰器来扩展输入指令，支持type=file。要记住的主要警告是这个方法在IE9中不起作用，因为IE9没有实现File API。在IE9或更早的版本中，使用JavaScript通过XHR上传二进制数据(无论哪种类型)是根本不可能的(使用ActiveXObject访问本地文件系统不被视为使用ActiveX只会带来安全问题)。
这个方法也需要AngularJS 1.4。但是你可以使用$ provider .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存在的原因。
The issue is (as was mentioned before) that without the file api support doing this properly is unfeasible for the core given our baseline being IE9 and polyfilling this stuff is out of the question for core. Additionally trying to handle this input in a way that is not cross-browser compatible only makes it harder for 3rd party solutions, which now have to fight/disable/workaround the core solution. ... I'm going to close this just as we closed #1236. Angular 2 is being build to support modern browsers and with that file support will easily available.
推荐文章
- AngularJS绑定中的数学函数
- 我可以在AngularJS的指令中注入服务吗?
- 如何在AngularJS中有条件地要求表单输入?
- 如何从控制器函数切换视图?
- 如何在AngularJS中访问cookie ?
- AngularJS模板中的三元运算符
- 在angularJS中& vs @和=的区别是什么
- 如何/何时使用ng-click调用路由?
- 在Angular JS中的控制器之间传递数据?
- 在ng-repeat结束时调用函数
- 我怎样才能获得承诺的价值?
- 我应该使用' this '还是' $scope ' ?
- Angular IE缓存$http的问题
- 删除数组的第一项(比如从堆栈中弹出)
- 从AngularJS的url中删除片段标识符(# symbol)
