Angular1多文件选择时(Change)事件失效问题求助

你的代码核心问题是AngularJS（1.x）与Angular（2+）语法混用，同时函数绑定对象不匹配，导致selectFile函数无法触发，具体修复如下：

1. 修正事件绑定语法 #

AngularJS（1.x）不支持(change)这种括号式事件绑定，需替换为AngularJS兼容的写法。对于文件输入框，直接用原生onchange绑定到$scope函数是最可靠的方式。

2. 统一函数调用对象 #

控制器里将selectFile挂载在$scope上，但HTML里写的是upload.selectFile，两者不匹配，需要统一指向$scope的函数。

修复后的完整代码 #

HTML 部分 #

<!-- 隐藏原生文件输入框，用按钮触发选择 -->
<input id="selected-images" accept="image/*" type="file" onchange="angular.element(this).scope().selectFile($event)" multiple style="display: none;"/>
<button id="select-image" class="btn btn-primary-alt" style="border-radius: 8px; padding: 15px 25px;" type="button" ng-click="triggerFileSelect()">Upload from Storage</button>

控制器部分 #

// 确保控制器正确注入$scope
app.controller('YourController', ['$scope', function($scope) {
    var vm = this;

    // 触发文件选择框点击的函数
    $scope.triggerFileSelect = function() {
        document.getElementById('selected-images').click();
    };

    // 文件选择后的处理函数
    $scope.selectFile = function (event) {
        console.log('awdawdawdawdaw');
        vm.selectedFiles = event.target.files;

        console.log('====================================');
        console.log('this is the selected file from selectFile function');
        console.log(vm.selectedFiles);
        console.log('====================================');
    };
}]);

额外提示 #

• 全程使用AngularJS（1.x）语法，避免混用Angular（2+）的语法规则，否则会出现绑定失效问题。
• 隐藏原生文件输入框是更友好的交互方案，避免原生控件样式破坏页面布局。

内容的提问来源于stack exchange，提问作者Miguel Radaza