我有一个使用标准 Javascript 的工作示例，但我想使用 AngularJS 使其更加原生。
具体来说，我需要使用用户选择的文件的文件名更新范围。
这是我使用 native Javascript 实现的:
<span>
<input ng-model="uploadDownloads" type="file" style="visibility:hidden; width: 1px;" id=uploadDownloads name=uploadDownloads onchange="$(this).parent().find('span').html($(this).val().replace('C:\\fakepath\\', ''))" /> <!-- Chrome security returns 'C:\fakepath\' -->
<input class="btn btn-primary" type="button" value="choose file" onclick="$(this).parent().find('input[type=file]').click();"/> <!-- on button click fire the file click event -->
<span class="badge badge-important" ></span>
</span>
文件读取器功能已经有 Angular :
$scope.add = function(valid){
if(valid){
$scope.data = 'none';
var f = document.getElementById('uploadDownloads').files[0];
var r = new FileReader();
r.onloadend = function(e){
$scope.data = e.target.result;
$scope.notPass = false;
$modalInstance.close({
'data':$scope.data,
'fileName':$scope.fileName,
'fileExplain':$scope.fileExplain
});
};
/*activate the onloadend to catch the file*/
r.readAsBinaryString(f);
} else {
$scope.notPass = true;
}
};
问题是用 Angular 而不是 JavaScript 激活 onclick 和 onchange，以便我的 <span>使用选定的文件名进行更新。
最佳答案
这个问题建立在现有的 question and answer 的基础上。不过具体来说，我修改了 that answer 中的代码为了解决这里出现的具体问题，即如何更新 <span>让用户以 angularjs 惯用的方式选择文件名。
这是一个codepen带有工作示例。
这是 html 文件的相关部分:
<body ng-controller="AppController">
<input ng-model="uploadDownloads" type="file" fd-input file-name="fileName"/>
<span class="badge badge-important">Output here: {{fileName}}</span>
</body>
这里的关键是您有一个名为 fd-input 的自定义指令具有与其定义的名为 file-name 的属性的双向绑定(bind)。您可以通过您的 $scope 之一变量到该属性中，指令会将文件名绑定(bind)到它。这是 Controller 和指令。
(function() {
'use strict';
angular.module('app', [])
.controller('AppController', AppController)
.directive('fdInput', fdInput);
function AppController($scope) {
$scope.fileName = '';
}
function fdInput() {
return {
scope: {
fileName: '='
},
link: function(scope, element, attrs) {
element.on('change', function(evt) {
var files = evt.target.files;
console.log(files[0].name);
console.log(files[0].size);
scope.fileName = files[0].name;
scope.$apply();
});
}
}
};
})();
如上所述，该指令直接取自 another SO answer 。我修改了它以添加一个作用域，该作用域以两种方式绑定(bind)到 file-name属性:
...
return {
scope: {
fileName: '='
},
...
然后我分配 files[0].name双向绑定(bind):
...
scope.fileName = files[0].name;
scope.$apply();
...
查看代码笔。应该可以做到这一点。您可以只在指令中使用父作用域，但这不是一个好主意，因为它限制您每个 Controller 只能使用一次该指令。另外，如果您想列出多个文件，则必须更新此代码以返回这些文件的数组。
希望这有帮助。
关于javascript - 在 AngularJS 中显示 <input> 中选定的文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33973097/