处理XMLHttpRequest数据

时间:2013-12-20 22:01:49

标签: javascript angularjs xmlhttprequest

如何处理XMLHttpRequest数据?我有一个javascript / angular控制器,它可以获取一些图像并将其发送到另一个页面,我想将图像存储到数据库中。

我的代码是这样的:

modal.controller('UploadController', function ($scope) {

    $scope.files = new Array();

    $scope.getFiles = function (element){
        $scope.$apply(function($scope){
            for (var i = 0; i < element.files.length; i++) {
                $scope.files.push(element.files[i])
            }
            console.log('files lenght : ' + $scope.files.length);
        });
    };

    $scope.uploadFile = function () {
        var data = new FormData();
        var xhr = new XMLHttpRequest();

        for(var i in $scope.files){
            data.append("uploadedFile", $scope.files[i])
        }

        xhr.upload.addEventListener("progress", uploadProgress, false)
        xhr.addEventListener("load", uploadComplete, false)
        xhr.addEventListener("error", uploadFailed, false)
        xhr.addEventListener("abort", uploadCanceled, false)
        xhr.open("POST", "fileupload.html")
        $scope.progressVisible = true

        xhr.send(data);
    }

    function uploadProgress(evt) {
        $scope.$apply(function(){
            if (evt.lengthComputable) {
                $scope.progress = Math.round(evt.loaded * 100 / evt.total);
            } else {
                $scope.progress = 'unable to compute';
            }
        })
    }

    function uploadComplete(evt) {
        alert(evt.target.responseText);
    }

    function uploadFailed(evt) {
        alert("There was an error attempting to upload the file.");
    };

    function uploadCanceled(evt) {
        $scope.$apply(function(){
            scope.progressVisible = false;
        })
        alert("The upload has been canceled by the user or the browser dropped the connection.");
    };
});

在警报的响应文本中,我可以看到来自fileupload.html的html代码。 如何在fileupload.html中接收数据,以便将图像存储在数据库中?

0 个答案:

没有答案