我是角的新手。我试图从HTML“文件”字段读取上传的文件路径，每当“更改”发生在这个字段上。如果我使用“onChange”，它可以工作，但当我以angular的方式使用“ng-change”时，它就不起作用了。
<script>
var DemoModule = angular.module("Demo",[]);
DemoModule .controller("form-cntlr",function($scope){
$scope.selectFile = function()
{
$("#file").click();
}
$scope.fileNameChaged = function()
{
alert("select file");
}
});
</script>
<div ng-controller="form-cntlr">
<form>
<button ng-click="selectFile()">Upload Your File</button>
<input type="file" style="display:none"
id="file" name='file' ng-Change="fileNameChaged()"/>
</form>
</div>
fileNameChaged()从不调用。Firebug也不会显示任何错误。
没有文件上传控件的绑定支持
https://github.com/angular/angular.js/issues/1375
<div ng-controller="form-cntlr">
<form>
<button ng-click="selectFile()">Upload Your File</button>
<input type="file" style="display:none"
id="file" name='file' onchange="angular.element(this).scope().fileNameChanged(this)" />
</form>
</div>
而不是
<input type="file" style="display:none"
id="file" name='file' ng-Change="fileNameChanged()" />
你能试试吗?
<input type="file" style="display:none"
id="file" name='file' onchange="angular.element(this).scope().fileNameChanged()" />
注意:这要求angular应用程序始终处于调试模式。如果调试模式被禁用，这将在产品代码中不起作用。
在函数中变化
而不是
$scope.fileNameChanged = function() {
alert("select file");
}
你能试试吗?
$scope.fileNameChanged = function() {
console.log("select file");
}
下面是一个文件上传的工作示例，拖放文件上传可能会有帮助
http://jsfiddle.net/danielzen/utp7j/
Angular文件上传信息
在ASP中上传AngularJS文件的URL。网
https://github.com/geersch/AngularJSFileUpload
AngularJs原生多文件上传与NodeJS的进展
http://jasonturim.wordpress.com/2013/09/12/angularjs-native-multi-file-upload-with-progress/
ngUpload - AngularJS中使用iframe上传文件的服务
http://ngmodules.org/modules/ngUpload
最简单的Angular jqLite版本。
JS:
.directive('cOnChange', function() {
'use strict';
return {
restrict: "A",
scope : {
cOnChange: '&'
},
link: function (scope, element) {
element.on('change', function () {
scope.cOnChange();
});
}
};
});
HTML:
<input type="file" data-c-on-change="your.functionName()">
使用ng-change1的“files-input”指令的工作演示
要使<input type=file>元素使用ng-change指令，它需要一个使用ng-model指令的自定义指令。
<input type="file" files-input ng-model="fileList"
ng-change="onInputChange()" multiple />
演示
angular.module("app",[])
.directive("filesInput", function() {
return {
require: "ngModel",
link: function postLink(scope,elem,attrs,ngModel) {
elem.on("change", function(e) {
var files = elem[0].files;
ngModel.$setViewValue(files);
})
}
}
})
.controller("ctrl", function($scope) {
$scope.onInputChange = function() {
console.log("input change");
};
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
<h1>AngularJS Input `type=file` Demo</h1>
<input type="file" files-input ng-model="fileList"
ng-change="onInputChange()" multiple />
<h2>Files</h2>
<div ng-repeat="file in fileList">
{{file.name}}
</div>
</body>
我扩展了@Stuart Axon的想法，为文件输入添加双向绑定(即允许通过将模型值重置为null来重置输入):
app.directive('bindFile', [function () {
return {
require: "ngModel",
restrict: 'A',
link: function ($scope, el, attrs, ngModel) {
el.bind('change', function (event) {
ngModel.$setViewValue(event.target.files[0]);
$scope.$apply();
});
$scope.$watch(function () {
return ngModel.$viewValue;
}, function (value) {
if (!value) {
el.val("");
}
});
}
};
}]);
Demo
这是对其他一些模型的改进，数据将以ng模型结束，这通常是你想要的。
标记(只要创建一个属性数据文件，这样指令就可以找到它)
<input
data-file
id="id_image" name="image"
ng-model="my_image_model" type="file">
JS
app.directive('file', function() {
return {
require:"ngModel",
restrict: 'A',
link: function($scope, el, attrs, ngModel){
el.bind('change', function(event){
var files = event.target.files;
var file = files[0];
ngModel.$setViewValue(file);
$scope.$apply();
});
}
};
});
