使用laravel在AngularJS中上传文件

时间:2016-11-08 04:49:14

标签: angularjs laravel file-upload

我想在AngularJS中上传图片,检索该图片并使用后端的laravel移动到新文件夹中。

我有这个代码。但它不起作用:

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>
    <body ng-app="fupApp">
    <div ng-controller="fupController">
        <input type="file" id="file1" name="file" multiple
            ng-files="getTheFiles($files)" />
        <input type="button" ng-click="uploadFiles()" value="Upload" />
    </div>
</body>
<script>
    angular.module('fupApp', [])
        .directive('ngFiles', ['$parse', function ($parse) {
            function fn_link(scope, element, attrs) {
                var onChange = $parse(attrs.ngFiles);
                element.on('change', function (event) {
                    onChange(scope, { $files: event.target.files });
                });
            };
                return {
                link: fn_link
            }
        } ])
        .controller('fupController', function ($scope, $http) {
            var formdata = new FormData();
            $scope.getTheFiles = function ($files) {
            console.log($files);
            console.log($files[0].type);

                angular.forEach($files, function (value, key) {
                    formdata.append(key, value);
                    console.log(key + ' ' + value.name);
                });
            };

            // NOW UPLOAD THE FILES.
            $scope.uploadFiles = function () {

                var request = {
                    method: 'POST',
                    url: '/api/fileupload/',
                    data: formdata,
                    headers: {
                        'Content-Type': undefined
                    }
                };

                // SEND THE FILES.
                $http(request)
                    .success(function (d) {
                        alert(d);
                    })
                    .error(function () {
                    });
            }
        });
</script>
</html>

如何使用laravel接收此图像并移入文件夹?

0 个答案:

没有答案