End*_*ono 275 angularjs angularjs-ng-model angularjs-fileupload
我尝试在输入标签上使用ng-model和类型文件:
<input type="file" ng-model="vm.uploadme" />
但是在选择文件后,在控制器中,$ scope.vm.uploadme仍未定义.
如何在控制器中获取所选文件？
End*_*ono 323
我用指令创建了一个解决方法:
.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;
});
});
}
}
}]);
Elm*_*mer 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(!)的文件的内容.
请注意,此脚本不会上传任何内容.它只会使用data-uri(base64)编码文件的内容来填充模型.
在这里查看一个有效的演示:http: //plnkr.co/CMiHKv2BEidM9SShm9Vv
geo*_*awg 32
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>Per*_*son 27
这是@ 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的值.
大家好我创建一个指令并在凉亭上注册.
这个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/
希望能帮到你
| 归档时间： |
|
| 查看次数： |
295138 次 |
| 最近记录： |