how can we upload a file in angularJS

2019-06-13 23:54发布

站内问答 / 后端开发
1815 1 6

is there any direct approach for file upload in angularJS. I am completely new to angularJS. Tried googling about this,but couldn't find any basic example on this.do wee need to install any libraries/.js files 

 <!DOCTYPE html>
    <html ng-app xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    </head>
<body>
<h5>Upload</h5>
    <!--<div class="span12">-->            
    <div class="span4">
        <div class="fileupload fileupload-new" data-provides="fileupload">
            <div class="input-append">
                <div class="uneditable-input span3">
                    <i class="icon-file fileupload-exists"></i> 
                    <span class="fileupload-preview" ng-model="userType"></span>                                          
                </div>                                
                <span class="btn btn-file">
                    <span class="fileupload-new">Select file</span>
                    <span class="fileupload-exists">Change</span>
                    <!--<input type="file" name="file" />-->
                    <input type="file" ng-model="upFile" onchange="angular.element(this).scope().setFileEventListener(this)" />
                </span>
                <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
            </div>
        </div>                   
    </div>
    <div class="span2"  >
        <button type="submit"  value="Send" id="btnStartUpload" class="btn start" ng-click="uploadFile()" ng-disabled="!upload_button_state">
            <i class="icon-upload"></i>
            <span>Upload File</span>
        </button>                       
    </div>
    <script>
        $scope.setFileEventListener = function (element) {
            $scope.uploadedFile = element.files[0];

            if ($scope.uploadedFile) {
                $scope.$apply(function () {
                    $scope.upload_button_state = true;
                });
            }
        }

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


        function uploadFile() {
            if (!$scope.uploadedFile) {
                return;
            }

            ajax_post.uploadFile_init($scope.uploadedFile)
                .then(function (result) {
                    if (result.status == 200) {
                        $scope.storeDB_button_state = true;
                        clientInfo.imagePath = "/uploadsfolder/" + $scope.uploadedFile.name;

                    }
                }, function (error) {
                    alert(error.message);
                });
        }
    </script>
</body>
</html>

1条回答
一纸荒年 Trace。
2楼-- · 2019-06-14 00:29

Here is a snippets of code that upload any file (images also) to server by using

bootstrap-fileupload (Bootstrap v2.3.1-j6)

enter image description here

HTML

<h5>Upload</h5>
    <!--<div class="span12">-->            
    <div class="span4">
        <div class="fileupload fileupload-new" data-provides="fileupload">
            <div class="input-append">
                <div class="uneditable-input span3">
                    <i class="icon-file fileupload-exists"></i> 
                    <span class="fileupload-preview" ng-model="userType"></span>                                          
                </div>                                
                <span class="btn btn-file">
                    <span class="fileupload-new">Select file</span>
                    <span class="fileupload-exists">Change</span>
                    <!--<input type="file" name="file" />-->
                    <input type="file" ng-model="upFile" onchange="angular.element(this).scope().setFileEventListener(this)" />
                </span>
                <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
            </div>
        </div>                   
    </div>
    <div class="span2"  >
        <button type="submit"  value="Send" id="btnStartUpload" class="btn start" ng-click="uploadFile()" ng-disabled="!upload_button_state">
            <i class="icon-upload"></i>
            <span>Upload File</span>
        </button>                       
    </div>

JS

$scope.setFileEventListener = function(element) {
        $scope.uploadedFile = element.files[0];

        if ($scope.uploadedFile) {
            $scope.$apply(function() {
                $scope.upload_button_state = true;
            });   
        }
    }

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


function uploadFile() {
    if (!$scope.uploadedFile) {
        return;
    }

    ajax_post.uploadFile_init($scope.uploadedFile)
        .then(function(result) {
            if (result.status == 200) {
                $scope.storeDB_button_state = true;
                clientInfo.imagePath = "/uploadsfolder/" +     $scope.uploadedFile.name;

            }
        }, function(error) {
            alert(error.message);
        });
}

Here we use service ajax_post and invoke method: uploadFile_init:

factory

app.factory('ajax_post', ['$http', function(_http) {

        return {           
            uploadFile_init: function(uploadedFile) {
                var fd = new FormData();
                fd.append("uploadedFile", uploadedFile);
                var upload_promise = _http.post('somePath',
                    fd, {
                        headers: {
                            'Content-Type': undefined
                        },
                        transformRequest: angular.identity
                    });

                return upload_promise;
            }
        }
    }
]);

Hope that will help

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)