如何重置Angular JS中的文件上传控件

Question

在我的应用程序中，我有一个文件上传控件，

   <label>Upload File</label>
    <div class="ui-select">
            <input type="file" name="files" ng-files="getTheFiles($files)" />
    </div>

有助于上传文件的控制器代码是......

    $scope.file = null;

    //UPLOAD FILE CODE
    var formdata;
    $scope.getTheFiles = function ($files) {
        console.log($files[0].type);
        formdata = new FormData();
        angular.forEach($files, function (value, key) {
            formdata.append(key, value);
        });
    };

    // NOW UPLOAD THE FILES.
    $scope.uploadFiles = function () {
        var request = {
            method: 'POST',
            url: BasePath + 'uploadNative/UploadFiles/',
            data: formdata,
            headers: {
                'Content-Type': undefined
            }
        };

        // SEND THE FILES.
        console.log(formdata);

        if (formdata != null || formdata != undefined) {
            $http(request)
                .success(function (response) {
                    if (response != "Failed!" && response !="FileAlreadyUploaded") {
                        console.log("Succeeds");
                    }
                    else if(response == "FileAlreadyUploaded")
                    {
                        angular.element("#fileUploadModal").modal();

                    }
                    else {
                        console.log("Failed");
                    }
                })
                .error(function () {
                });
        }

我希望在成功或失败时清除文件上传控件，即

后

angular.element("#fileUploadModal").modal();

显示模态，我想要清除控件。 我该怎么办？ 请解释。

Answer 1

设置id到file upload control

HTML：

<input id= "control" type="file" name="files" ng-files="getTheFiles($files)" />

控制器：

angular.element("#control").value = "";

Answer 2

添加ng-click到您的输入：

<input ng-click="reset()" id= "control" type="file" name="files" ng-files="getTheFiles($files)" />

并在您的控制器中创建一个重置方法：

 $scope.reset= function () {
    angular.element("input[type='file']").val(null);
};