如何使用 Angularjs 选择文件？

Question

我正在开发一个 Angularjs 应用程序。

我可以在选择文件时调用该函数，但它不会将所选文件传递给 Angularjs 函数。我在变量 selectedFile 中得到一个 undefined 值。

我正在使用触发器打开文件选择器，如下所示：

$scope.clickUpload = function () {
    angular.element('#uploader').trigger('click');
}

以下是我的 HTML：

<button type="submit" ng-click="clickUpload()">
<span>Upload Image</span>
</button>
<input id="uploader" hidden type="file" ng-accept="'.jpg,.png,.gif,.jpeg,.webp'" ngf-select="uploadFile(selectedFile)" ng-model="selectedFile" name="file" />

以下是我的 Angularjs 函数，用于上传已选择的文件：

$scope.uploadFile = function (selectedFile) {
    alert(selectedFile);
}

我犯了什么错误？感谢您阅读我的问题。

Answer 1

您不能在type="file" 输入中使用ngModel 指令。改为这样做：

$scope.clickUpload = function() {
    var fileInput = document.getElementById("uploader");
    fileInput.click();

    //do nothing if object doesn't contain a file
    if(fileInput.files.length === 0) return;

    var file = fileInput.files[0];
    alert(file.fileName);
}