我无法使用 AngularJS 从表单接收标题数据

Question

我正在使用 angularJS 和插件 nervgh/angular-file-upload 制作表单 接收标题数据、文本数据和多个文件。多个文件运行良好，但问题是我无法接收标题数据和文本数据。这是我的 html 文件：

<div class="container">
  <div class="row">
    <div class="form-position">
      <div class="thumbnail">
        <div class="form-margin">
          <form class="form-horizontal">
            <div class="form-group">
              <label class="col-lg-3 control-label">Titulo de la entrada</label>
              <div class="col-lg-6">
                <input ng-model="inputTitle" type="text" class="form-control" id="inputTitle" name="inputTitle"
                       placeholder="Introduza el titulo del post" required>
              </div>
            </div>
            <div class="form-group">
              <label class="col-lg-3 control-label">Texto</label>
              <div class="col-lg-6">
                <textarea ng-model="inputText" class="form-control" id="inputText" name="inputText"
                          placeholder="Introduza el texto" rows="5" required></textarea>
              </div>
            </div>
            <div class="form-group">
              <div class="col-lg-10">
                <p ng-class="result" style="padding: 15px;">{{resultMessage}}</p>
                <label class="col-lg-5 control-label">Inserta las Imagenes</label>
                <input type="file" nv-file-select="" uploader="uploader" class="col-lg-7" multiple>
                <table class="table col-lg-offset-1">
                  <thead>
                  <tr>
                    <th width="50%">Name</th>
                    <th ng-show="uploader.isHTML5">Size</th>
                    <th ng-show="uploader.isHTML5">Progress</th>
                    <th>Status</th>
                    <th>Actions</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr ng-repeat="item in uploader.queue">
                    <td>
                      <strong>{{ item.file.name }}</strong>
                    </td>
                    <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
                    <td ng-show="uploader.isHTML5">
                      <div class="progress" style="margin-bottom: 0;">
                        <div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
                      </div>
                    </td>
                    <td class="text-center">
                      <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
                      <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
                      <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
                    </td>
                    <td nowrap>
                      <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()"
                              ng-disabled="item.isReady || item.isUploading || item.isSuccess">
                        <span class="glyphicon glyphicon-upload"></span>
                        Upload
                      </button>
                      <button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()"
                              ng-disabled="!item.isUploading">
                        <span class="glyphicon glyphicon-ban-circle"></span>
                        Cancel
                      </button>
                      <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
                        <span class="glyphicon glyphicon-trash"></span>
                        Remove
                      </button>
                    </td>
                  </tr>
                  </tbody>
                </table>

              </div>
            </div>
            <div class="form-group">
              <div class="col-lg-offset-2 col-lg-10">
                <button type="submit" class="btn btn-primary" ng-click="uploader.uploadAll()"
                        ng-disabled="submitButtonDisabled">
                  Enviar
                </button>
              </div>
            </div>
          </form>

          <div ng-controller="LoginController">
            <button ng-click="logout()" class="btn-primary">logout</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

这是我的控制器

blog.controller('BlogAdminController',['$scope','FileUploader',function($scope,FileUploader){
  $scope.inputTitle;
  var uploader = $scope.uploader = new FileUploader({
    url: 'entrada.php',
    formData: {'title':$scope.inputTitle}
  });

  //filtros
  uploader.filters.push({
    name: 'imageFilter',
    fn: function(item /*{File|FileLikeObject}*/, options) {
      var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
      return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
    }
  });

  //callbacks
  uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
    console.info('onWhenAddingFileFailed', item, filter, options);
  };
  uploader.onAfterAddingFile = function(fileItem) {
    console.info('onAfterAddingFile', fileItem);
  };
  uploader.onAfterAddingAll = function(addedFileItems) {
    console.info('onAfterAddingAll', addedFileItems);
  };
  uploader.onBeforeUploadItem = function(item) {
    console.info('onBeforeUploadItem', item);
  };
  uploader.onProgressItem = function(fileItem, progress) {
    console.info('onProgressItem', fileItem, progress);
  };
  uploader.onProgressAll = function(progress) {
    console.info('onProgressAll', progress);
  };
  uploader.onSuccessItem = function(fileItem, response, status, headers) {
    console.info('onSuccessItem', fileItem, response, status, headers);
  };
  uploader.onErrorItem = function(fileItem, response, status, headers) {
    console.info('onErrorItem', fileItem, response, status, headers);
  };
  uploader.onCancelItem = function(fileItem, response, status, headers) {
    console.info('onCancelItem', fileItem, response, status, headers);
  };
  uploader.onCompleteItem = function(fileItem, response, status, headers) {
    console.info('onCompleteItem', fileItem, response, status, headers);
  };
  uploader.onCompleteAll = function() {
    console.info('onCompleteAll');
  };
  console.info('uploader', uploader);
}]);

如果我把这个举例：

var uploader = $scope.uploader = new FileUploader({
  url: 'entrada.php',
  formData: {'title':"hola"}
});

它有效。我收到了数据，但我放了这个：

var uploader = $scope.uploader = new FileUploader({
  url: 'entrada.php',
  formData: {'title': $scope.inputTitle}
});

我没有收到数据表单标题

<input ng-model="inputTitle" 
       type="text" 
       class="form-control" 
       id="inputTitle"
       name="inputTitle"
       placeholder="Introduza el titulo del post"
       required>

我有这个 php 文件，如果正确接收数据，我只想检查第一次，之后我将完成这个 php 文件以将数据保存在数据库中：

error_reporting(E_ALL);
ini_set('display_errors', '1');

$images = file_get_contents("php://input");
$objData = json_decode($images);

///compruebo que recibo el fichero primero
if(isset($_FILES['file']) && !empty($_POST)){

        //obtengo grid
        $uploaddir = 'images/blog/';
        $uploadfile = $uploaddir.basename($_FILES['file']['name']);
        if(move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile)){
            //$contenido = array('url'=>$uploadfile);
            //$coleccion->insert($contenido);
            $data = array('success'=>true,'message'=>'El archivo se guardo perfectamente');
            echo json_encode($data);
        }else{
            $data = array('success'=>false,'message'=>'El archivo no se guardo');
            echo json_encode($data);
        }
}else{
    $data = array('success'=>false,'message'=>'No se recivió nada');
    echo json_encode($data);
}

如果此插件无法解决此问题，请向我展示如何发送带有文本和多个文件的表单的示例。谢谢

Answer 1

如果您想将带有文件的 POST 数据发送到服务器，您需要设置：

var arr[];
arr['title'] = 'Title'
formData : {arr}