文件上传使用的PHP服务器脚本AngularJS

问题描述：

我审阅了关于这个主题的问题和答案，我不认为他们完全回答我的问题，它们是：文件上传使用的PHP服务器脚本AngularJS

使用角前端（无论怎样这上传被处理）将文件数据发送到服务器上的脚本，如php脚本（这是我的首选方法）。一旦php脚本已经运行，我想返回上传的页面，并在那里给出一条消息..我不想显示php页面。将欣赏一些关于如何实现这一目标的指导。理想的是什么代码添加到PHP脚本。
我想捕获并保存到与文件相关的数据库信息，例如其名称和用户输入/选择的数据，如文档类别。有没有办法做到这一点，作为文件上传的一部分？即，理想地，用户将以包括文件上载按钮的表格完成条目，以便用户选择要上传的文件，但仅在表单提交被点击的情况下是文件上传被执行以及被返回用于处理的其他表单数据。

我已经花了3天在这..所以任何帮助将是伟大的。

您是否尝试过类似NG-流？它包括示例角度和php代码。 – Tristan

非常感谢。它看起来不错，但（a）我无法让它工作（通过运动没有明显的错误，但文件实际上没有上传..使用他们的基本示例..传输列表显示文件传输完成为真（但文件实际上没有上传）和上传为假）和（b）我需要弄清楚如何同时提交其他数据字段或作为清晰工作流的一部分，例如上传文件后，文件名将由文件输入上传到表单字段，用户离开后输入其他表单字段，然后发布到REST进行数据库输入。 –

Midhun提供的答案很全面，是一个不错的选择。如果你想使用ng-flow，我可以给你提供关于如何在帖子中包含表单数据的细节？ – Tristan

答

您可以使用FormData对象将表单数据发送到您的server.It将允许您同时发送文件和文本数据。你可以找到更多关于它的信息here。

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

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

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

<?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(); 

?>

非常感谢Midhum。明天会经历这个。今天在医院！ –

但是，我使用ng-file-upload，并且我尝试了Midhum和github页面中的示例，我得到以下错误：在偏移量623处找不到有效的标记，找到：250 这似乎发生在Upload函数被称为..我有一个控制台。立即登录上传功能，不叫任何想法？ –

我编辑了答案。这种方法更好，不需要外部库。请尝试一下。 –

文件上传使用的PHP服务器脚本AngularJS

相关推荐