我是角的新手。我试图从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也不会显示任何错误。
我做了一个小指令来监听文件输入的变化。
View JSFiddle
view.html:
<input type="file" custom-on-change="uploadFile">
controller.js:
app.controller('myCtrl', function($scope){
$scope.uploadFile = function(event){
var files = event.target.files;
};
});
directive.js:
app.directive('customOnChange', function() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var onChangeHandler = scope.$eval(attrs.customOnChange);
element.on('change', onChangeHandler);
element.on('$destroy', function() {
element.off();
});
}
};
});
简单的方法是编写自己的指令绑定到“change”事件。
只是让你们知道IE9不支持FormData所以你不能从change事件中得到file对象。
你可以使用ng-file-upload库，它已经支持IE的FileAPI polyfill，并简化了将文件发布到服务器的过程。它使用一个指令来实现这一点。
<script src="angular.min.js"></script>
<script src="ng-file-upload.js"></script>
<div ng-controller="MyCtrl">
<input type="file" ngf-select="onFileSelect($files)" multiple>
</div>
JS:
//inject angular file upload directive.
angular.module('myApp', ['ngFileUpload']);
var MyCtrl = [ '$scope', 'Upload', function($scope, Upload) {
$scope.onFileSelect = function($files) {
//$files: an array of files selected, each file has name, size, and type.
for (var i = 0; i < $files.length; i++) {
var $file = $files[i];
Upload.upload({
url: 'my/upload/url',
data: {file: $file}
}).then(function(data, status, headers, config) {
// file is uploaded successfully
console.log(data);
});
}
}
}];
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/
没有文件上传控件的绑定支持
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
