我是角的新手。我试图从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也不会显示任何错误。
太完整的解决方案基于:
`onchange="angular.element(this).scope().UpLoadFile(this.files)"`
隐藏输入字段并将其替换为图像的简单方法,在解决方案之后,这也需要对angular进行hack,但可以完成工作[TriggerEvent不像预期的那样工作]
解决方案:
将输入字段放入display:none[输入字段存在于DOM中但不可见]
把你的图片放在后面
在映像上使用nb-click()激活一个方法
当图像被点击时,在输入字段上模拟一个DOM动作“点击”。果不其然!
var tmpl = '<input type="file" id="{{name}}-filein"' +
'onchange="angular.element(this).scope().UpLoadFile(this.files)"' +
' multiple accept="{{mime}}/*" style="display:none" placeholder="{{placeholder}}">'+
' <img id="{{name}}-img" src="{{icon}}" ng-click="clicked()">' +
'';
// Image was clicked let's simulate an input (file) click
scope.inputElem = elem.find('input'); // find input in directive
scope.clicked = function () {
console.log ('Image clicked');
scope.inputElem[0].click(); // Warning Angular TriggerEvent does not work!!!
};
使用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>
Angular的元素(比如指令的根元素)都是jQuery [Lite]对象。这意味着我们可以像这样注册事件监听器:
link($scope, $el) {
const fileInputSelector = '.my-file-input'
function setFile() {
// access file via $el.find(fileInputSelector).get(0).files[0]
}
$el.on('change', fileInputSelector, setFile)
}
这是jQuery事件委托。在这里,监听器附加到指令的根元素。当事件被触发时,它将弹出到已注册的元素,jQuery将确定事件是否起源于匹配已定义选择器的内部元素。如果是,处理程序将触发。
这种方法的好处是:
处理程序被绑定到$元素,当指令作用域被销毁时,$元素将被自动清除。
模板中没有代码
即使在你注册事件处理程序(比如使用ng-if或ng-switch)时,目标委托(输入)还没有呈现也会工作
http://api.jquery.com/on/
我建议创建一个指令
<input type="file" custom-on-change handler="functionToBeCalled(params)">
app.directive('customOnChange', [function() {
'use strict';
return {
restrict: "A",
scope: {
handler: '&'
},
link: function(scope, element){
element.change(function(event){
scope.$apply(function(){
var params = {event: event, el: element};
scope.handler({params: params});
});
});
}
};
}]);
这个指令可以使用很多次,它使用自己的作用域,不依赖于父作用域。你也可以给handler函数一些参数。处理函数将与作用域对象一起调用,该对象在您更改输入时处于活动状态。
$apply在每次调用change事件时更新您的模型
没有文件上传控件的绑定支持
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
太完整的解决方案基于:
`onchange="angular.element(this).scope().UpLoadFile(this.files)"`
隐藏输入字段并将其替换为图像的简单方法,在解决方案之后,这也需要对angular进行hack,但可以完成工作[TriggerEvent不像预期的那样工作]
解决方案:
将输入字段放入display:none[输入字段存在于DOM中但不可见]
把你的图片放在后面
在映像上使用nb-click()激活一个方法
当图像被点击时,在输入字段上模拟一个DOM动作“点击”。果不其然!
var tmpl = '<input type="file" id="{{name}}-filein"' +
'onchange="angular.element(this).scope().UpLoadFile(this.files)"' +
' multiple accept="{{mime}}/*" style="display:none" placeholder="{{placeholder}}">'+
' <img id="{{name}}-img" src="{{icon}}" ng-click="clicked()">' +
'';
// Image was clicked let's simulate an input (file) click
scope.inputElem = elem.find('input'); // find input in directive
scope.clicked = function () {
console.log ('Image clicked');
scope.inputElem[0].click(); // Warning Angular TriggerEvent does not work!!!
};