Question

在angularJS中是否有任何直接的文件上传方法。我是angularJS的新手。尝试谷歌搜索这个，但找不到任何基本的例子。我们需要安装任何库/ .js文件

 <!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>

Answer 1

以下是使用

将任何文件（图像也）上传到服务器的代码片段

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);
        });
}

我们在这里使用服务ajax_post并调用方法：uploadFile_init：

<强>工厂

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;
            }
        }
    }
]);

希望有所帮助

我们如何在angularJS中上传文件

1 个答案: