文件上传使用AngularJS与php服务器脚本

I have reviewed the questions and answers on this topic and I dont think they fully answer my issues which are:

我已经回顾了关于这个主题的问题和答案，我不认为他们完全回答了我的问题：

the upload using the angular frontend (whichever way this is handled) sends the file data to a script on the server such as a php script (which is my preferred method). Once the php script has run I want to return to the page from which the upload was made and give a message there..I dont want the php page to display. Will appreciate some guidance on how to achieve this. Ideally what code to add to the php script.

使用角度前端（无论采用哪种方式处理）上传文件数据都会发送到服务器上的脚本，例如php脚本（这是我首选的方法）。一旦php脚本运行，我想返回上传的页面，并在那里给出一条消息..我不想要显示php页面。将了解如何实现这一目标的一些指导。理想情况下，要添加到php脚本的代码。
I want to capture and save to a database info relating to the file such as its name and data entered/selected by the user such as a document category. Is there a way to achieve this as part of the file upload? ie ideally the user will complete entries in a form which includes a file upload button so that the user selects the file to upload but only on the form submit being clicked is the file upload actioned along with the other form data being returned for processing.

我想捕获并保存到与文件相关的数据库信息，例如其名称和用户输入/选择的数据，例如文档类别。有没有办法在文件上传过程中实现这一目标？即，理想情况下，用户将以包括文件上传按钮的形式完成条目，以便用户选择要上载的文件，但仅在提交被单击的表单上是文件上载以及返回的其他表单数据以进行处理。

I have spent 3 days on this.. so any help will be great.

我花了3天时间......所以任何帮助都会很棒。

1 个解决方案

#1

You can use FormData objects to send form data to your server.It will allow you to send both files and text data at the same time. You can find more information about it here.

您可以使用FormData对象将表单数据发送到服务器。它允许您同时发送文件和文本数据。您可以在此处找到有关它的更多信息。

index.html

的index.html

<body ng-controller="myCtrl">
    <div class="file-upload">
        <input type="text" ng-model="name">
        <input type="file" file-model="myFile"/>
        <button ng-click="uploadFile()">upload me</button>
    </div>
</body>

In app.js, we create a custom directive fileModel, in which we listen for changes to the content of the input element and change the value of the variable in the scope accordingly. This is achieved using the $parse service to set the value in our scope.

在app.js中，我们创建了一个自定义指令fileModel，在其中我们监听输入元素内容的更改并相应地更改范围中变量的值。这是使用$ parse服务在我们的范围中设置值来实现的。

app.js

app.js

var myApp = angular.module('myApp', []);

myApp.directive('fileModel', ['$parse', function ($parse) {
    return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        var model = $parse(attrs.fileModel);
        var modelSetter = model.assign;

        element.bind('change', function(){
            scope.$apply(function(){
                modelSetter(scope, element[0].files[0]);
            });
        });
    }
   };
}]);

// We can write our own fileUpload service to reuse it in the controller
myApp.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file, uploadUrl, name){
         var fd = new FormData();
         fd.append('file', file);
         fd.append('name', name);
         $http.post(uploadUrl, fd, {
             transformRequest: angular.identity,
             headers: {'Content-Type': undefined,'Process-Data': false}
         })
         .success(function(){
            console.log("Success");
         })
         .error(function(){
            console.log("Success");
         });
     }
 }]);

 myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){

   $scope.uploadFile = function(){
        var file = $scope.myFile;
        console.log('file is ' );
        console.dir(file);

        var uploadUrl = "save_form.php";
        var text = $scope.name;
        fileUpload.uploadFileToUrl(file, uploadUrl, text);
   };

}]);

save_form.php

save_form.php

 <?php

     $target_dir = "./upload/";
     $name = $_POST['name'];
     print_r($_FILES);
     $target_file = $target_dir . basename($_FILES["file"]["name"]);

     move_uploaded_file($_FILES["file"]["tmp_name"], $target_file);

     //write code for saving to database 
     include_once "config.php";

     // Create connection
     $conn = new mysqli($servername, $username, $password, $dbname);
     // Check connection
     if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
     }

     $sql = "INSERT INTO MyData (name,filename) VALUES ('".$name."','".basename($_FILES["file"]["name"])."')";

     if ($conn->query($sql) === TRUE) {
         echo json_encode($_FILES["file"]); // new file uploaded
     } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
     }

     $conn->close();

?>

#1