Javascript 使用AngularJS和PHP上传文件

我想上传一个文件，同时使用AngularJS作为前端，PHP作为后端。 当我将Angular放在一边时，我的HTML表单如下所示：

<form enctype="multipart/form-data" action="process.php" method="POST" >
  File: <input name="userfile" type="file"/>
  <input type="submit" value="Send File" />
</form>

$scope.formData = '';
$scope.processForm = function() {
  $http({
    method  : 'POST',
    url     : 'process.php',
    data    : $.param($scope.formData),
    headers : { 'Content-Type': undefined } 
  })
  .success(function(data) {
    console.log(data);
    console.log('success!');
  })
  .error(function(data) {
    console.log(data)
  });
};

到目前为止，一切正常，文件通过点击提交上传。 但我需要用Angular完成整件事。因此，我将我的HTML更改为：

<form ng-submit="processForm()" >
  File: <input name="userfile" type="file" ng-model="formData.file"/>
  <input type="submit" value="Send File" />
</form>

---

当我单击“提交”时，控制台告诉我“成功！”，但没有上传任何文件。我认为问题在于th$http请求中的“数据”和“头”？但是我真的不确定这一点，到目前为止在网上找不到解决方案。有人知道我在使用angulars$http功能时需要做什么才能上传文件吗？

Angular如果不使用HTML5文件API，就无法使用AJAX上传文件

更改代码以使用文件API并提交二进制内容，或者使用外部库，如。

（html）
window.scope=$scope；
$scope.setFile=函数（ele）{
var photofile=ele.files[0]；
var reader=new FileReader（）；
console.log（照片文件）；
reader.onload=函数（e）{
$scope.$apply（函数（）{
控制台日志（e）；
$scope.prev_img=e.target.result；
$scope.prev\u img=angular.copy（$scope.prev\u img）；
$http({
方法：“POST”，
url:'api/1.php'，
数据：{'imagepath'：$scope.prev_img}，
标题：{'Content Type'：'application/x-www-form-urlencoded；charset=UTF-8'}
})
.成功（功能（数据）{
控制台日志（数据）；
})
.错误（函数（错误）{
$scope.data.error=错误；
});
});
}（angurlarjs）
（菲律宾）

您能给出一个将文件api与angular和php结合使用的示例吗？这对我很有帮助：[[1]：

$scope.formData = '';
$scope.processForm = function() {
  $http({
    method  : 'POST',
    url     : 'process.php',
    data    : $.param($scope.formData),
    headers : { 'Content-Type': undefined } 
  })
  .success(function(data) {
    console.log(data);
    console.log('success!');
  })
  .error(function(data) {
    console.log(data)
  });
};

    <input type='file' name="Filename"  data-ng-file-select  onchange="scope.setFile(this)" id="imgInp"> (html)

       window.scope = $scope;
       $scope.setFile = function (ele) {
        var photofile = ele.files[0];
        var reader = new FileReader();
        console.log(photofile);
        reader.onload = function (e) {
        $scope.$apply(function () {
        console.log(e);
        $scope.prev_img = e.target.result;
        $scope.prev_img = angular.copy($scope.prev_img);
        $http({
        method: 'POST',
        url: 'api/1.php',
        data: { 'imagepath': $scope.prev_img },
        headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
        })
        .success(function (data) {
        console.log(data);


        })
        .error(function (error) {
        $scope.data.error = error;
        });

        });
        }; (angurlarjs)

<?php

include 'db_connect.php';
include 'functions.php';


//$levels = array();

$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
$idUser = $request->imagepath;

echo $idUser;


// CLOSE CONNECTION
mysqli_close($mysqli);

echo json_encode($json);

?>(php)