Question

我想要使用angularjs输入类型文件而不使用required代码中的属性HTML。我的界面是：enter image description here

我想点击按钮submit后收到提醒。

function DatabaseCtrl($scope, $http, predefineds, locationSearch, queries, database, $window) {
var credentials = {
fileName: ""
};
$scope.credentials = credentials;
$scope.uploadToFolder = function() {
    if( $scope.credentials.fileName.length<1 ) {
        $window.alert("Please select a file!");
        return false;
    }
    database.uploadToFolder($scope.credentials.fileName, true);
};

HTML代码：

        <form role="form" name="frmUploadFolder" ng-submit="uploadToFolder()">
    <div class="box">
        <h2>
            <span ng-show="isUserFile">File directory browser :</span>
            <button type="button" ng-show="isUserFile" class="btn btn-default">See file(s)</button>
            <button type="button" ng-show="!isUserFile" class="btn btn-default">Upload file(s)</button>
        </h2>
        <div class="content">
            <p>
                <label ng-show="isUserFile" >Please specify a file, or a set of files:</label><br>
                <input type="file" ng-show="isUserFile" name="datafile" id="fileName" ng-model="credentials.fileName" size="20" required multiple>
                <button type="submit" ng-show="isUserFile" class="btn btn-default" >Upload</button><br>
            </p>

        <div ui-if="!tree.length" class="message">
            <p ui-if="!tree.loading">
                <span ng-show="!isUserFile">Empty directory</span>
            </p>
        </div>
        </div>
    </div>
</form>

服务js：

angular.module('referl.services').factory('database', function($http, channel, $rootScope) {
var database = {
    uploadToFolder: function(fileName, navigateOnSuccess) {
        var parameters = {
            fileName: fileName

        };
        $http.get("api/database/uploadToFolder", {params: parameters})
            .success(function(response) {
                if(response.error) {
                    alert(response.error);
                } else {
                    if (navigateOnSuccess) {
                        alert("Navigation On Success !");
                    }
                }
            });

    }

};

请帮忙吗？

Answer 1

由于某种原因，angular不完全支持将模型元素绑定到文件输入。指令方法通常是可接受的解决方法，但在您的控制器中，您还可以使用document.getElementById（“filename”）来获取对文件名输入的引用并获取其值。

如何使用angularjs将控件添加到输入文件？

1 个答案: