Question

嗨，我是文件上传的新手。我编写了一个api，它可以获取多个文件，文件名和id并将其保存到数据库中。它与Postman正常工作，并且我正在上传文件而没有问题。在表单数据中，我使用一个名为“ 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服务器端代码：

$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

这里有两个问题。首先，您只将输入中的第一个文件附加到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>

Answer 2

我认为您必须一个一个地上传文件。我就是这样做的，对我有用。

$(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)
      },
    });
  }
});

如何使用ajax发送多个文件和json数据

2 个答案: