Как отправить несколько файлов и данных JSON с AJAX

Question

Привет, я новичок в загрузке файлов. Я написал API, который может получить несколько файлов и имен файлов и идентификаторов, чтобы сохранить его в базе данных. Он работает нормально с Почтальоном, и я загружаю файлы без проблем.В данных формы я использую файл с ключом «multifileupload», ключом «picturetitle» и другим ключом «appointid». Он загружается, я прочитал много учебников и все еще не понял, как отправить несколько файлов однимввод и некоторые другие данные, которые я тестирую с почтальоном.

Мой HTML-код:

<form method="post" enctype="multipart/form-data">
            <p>
                <label>Add files (multiple): </label><br/>
                <input id="fileInput" type="file" name="example3[]" multiple="multiple"/>
            </p>
            <p>
                <input id="sendFileSubmit" type="submit"/>
            </p>
        </form>

Jquery:

    $(document).on("click","#sendFileSubmit",function (e) {
        e.preventDefault();
        var picturetitle = "testtitle";
        var appointid = 64;
        var fd = new FormData();
        var files = $('#fileInput')[0].files[0];
        fd.append('file',files);

        $.ajax({
            url: '../public/index.php/api/files/uploadfile',
            type: 'post',
            headers:{
                authorization:cookie
            },
            data:{
                multifileupload:fd,
                picturetitle:picturetitle,
                appointid:appointid
            },
            contentType: false,
            processData: false,
            success: function(result){
                console.log(result)
            },
        });
    });

PHP Slim Server Side Code:

$app->post('/uploadfile',function(Request $request, Response $response, array $args) {
            $decodedsenttoke = $request->getAttribute('decoded_token_data');
            $directory = $this->get('upload_directory');
            $uploadedFiles = $request->getUploadedFiles();
            $fileCount = 0;
            foreach ($uploadedFiles['multifileupload'] as $uploadedFile) {
                if ($uploadedFile->getError() === UPLOAD_ERR_OK) {
                    $pathOfUploadedFiles = "http://example.com/uploads/";
                    $filename = moveUploadedFile($directory, $uploadedFile);
                    $pathOfUploadedFiles .= $filename;
                    $input = $request->getParsedBody();
                    $insertsql = "INSERT INTO
files (picturelink   ,  picturetitle ,  appointid )
 VALUES    (:picturelink  , :picturetitle , :appointid )";
                    $this->db->setAttribute(PDO::MYSQL_ATTR_INIT_COMMAND, 'SET NAMES utf8');
                    $sth = $this->db->prepare($insertsql);
                    $sth->bindParam("picturelink", $pathOfUploadedFiles);
                    $sth->bindParam("picturetitle", $input['picturetitle']);
                    $sth->bindParam("appointid", $input['appointid']);
                    try{
                        $sth->execute();
                        $fileCount++;
                    } catch(PDOException $e){
                        echo '{"error":{"text":'.$e->getMessage().'}';
                    }
                }
            }
            $insertArray = array('message'=>'inserted' , 'numberOfUploadedfiles'=>$fileCount);
            return $this->response->withJson($insertArray);
        });

Answer 1

Я думаю, вы должны загрузить файлы один за другим.Я так и сделал, и у меня все работает.

$(document).on("click", "#sendFileSubmit", function(e) {
  e.preventDefault();
  var picturetitle = "testtitle";
  var appointid = 64;
  var files = $('#fileInput')[0].files[0];
  for (var f = 0; f < files.length; f++) {
    var fd = new FormData();
    fd.append('file', files[f]);
    $.ajax({
      url: '../public/index.php/api/files/uploadfile',
      type: 'post',
      headers: {
        authorization: cookie
      },
      data: {
        multifileupload: fd,
        picturetitle: picturetitle,
        appointid: appointid
      },
      contentType: false,
      processData: false,
      success: function(result) {
        console.log(result)
      },
    });
  }
});

Answer 2

Здесь есть две проблемы. Сначала вы добавляете только первый файл во входных данных к объекту FormData. Поскольку это multiple, вам нужно перебрать все файлы. Это можно сделать вручную или, так как входные данные находятся в form, вы можете просто предоставить ссылку на эту форму конструктору FormData, и он сделает всю работу за вас. Единственное предостережение здесь заключается в том, что вы измените name ввода, чтобы он соответствовал ключу объекта, так как я предполагаю, что это имя аргумента, которое ожидает логика на стороне сервера.

Во-вторых, вы пытаетесь отправить FormData через объект с другими данными. Правильный подход обратный; добавьте другие данные в объект FormData и отправьте только это. Попробуйте это:

$('#yourForm').on("submit", function(e) {
  e.preventDefault();
  var picturetitle = "testtitle";
  var appointid = 64;
  
  var fd = new FormData(this);
  fd.append('picturetitle', picturetitle);
  fd.append('appointid', appointid);

  $.ajax({
    url: '../public/index.php/api/files/uploadfile',
    type: 'post',
    headers: { authorization: cookie },
    data: fd,
    contentType: false,
    processData: false,
    success: function(result) {
      console.log(result)
    },
  });
});

<form method="post" enctype="multipart/form-data" id="yourForm">
  <p>
    <label>Add files (multiple): </label><br/>
    <input id="fileInput" type="file" name="multifileupload" multiple="multiple" />
  </p>
  <p>
    <input id="sendFileSubmit" type="submit" />
  </p>
</form>