Question

正如提到的问题，我有一个关于如何将图像上传到服务器的问题。我通过互联网搜索并找到了一些参考，但我仍然不了解它们是如何工作的。例如：AngularJS Image upload using php

图片是如何上传的？因为那里没有提交按钮。我已经按照那里的代码进行了尝试，仍然无法上传文件。

我还试图从这里看到一些可用的模块：File Upload using AngularJS 看了几个小时后，我仍然不明白如何使用它们。是否有更简单或更容易理解的指南供我遵循？提前致谢。

编辑：如果有一个更简单的例子，比如只上传一个文件，请链接我，因为有许多例子非常先进，包括许多部分，如上传多个文件等。

Answer 1

试试html

<div type="file" ngf-drop ng-model="files" class="container drop-box text-center" 
ngf-drag-over-class="dragover" ngf-multiple="true" ngf-allow-dir="true"
ngf-accept="'.jpg,.png'"><input type="hidden" name="image_id" >Drop Images here</div>

在你的控制器中尝试这个

controller: function($scope,$http,$timeout,Upload) {

        $scope.$watch('files', function () {
             $scope.upload($scope.files);
        });

        $scope.upload = function (files) {
            if (files && files.length) {
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    Upload.upload({
                        url: 'php/upload.php', 
                        headers: {'Content-Type': file.type},
                        method: 'POST',
                        data: file,
                        file: file, 
                    }).progress(function (evt) {
                        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                        console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
                    }).success(function (data, status, headers, config) {
                        console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
                        $scope.image_submit = function() {
            $http.post('php/slider.php?action=add_image', 
            {
            'img_name' : config.file.name, 
            'img_src' : '../images/' + config.file.name
            }
            )
            .success(function (data, status, headers, config) {
            $scope.get_image();
            })

            .error(function(data, status, headers, config){

            });
            };
            $scope.image_submit();
                    });
                }
            }
        };

这在你的php文件中

<?php

$filename = $_FILES['file']['name'];
$destination = '../images/' . $filename;
move_uploaded_file( $_FILES['file']['tmp_name'] , $destination );

?>

您还需要创建一个数据库连接并创建2个PHP函数，一个用于从数据库中获取图像，一个用于创建图像，一个函数用于控制器中以获取图像。添加图像的功能我已经给出了在控制器中给你。

使用AngularJS和PHP将图像上传到服务器路径

1 个答案: