Ajax发送没有表单标签的文件并提交

Question

我需要通过ajax发送图像，但不提交表单。通常，通过表单提交，我通过 $_FILES[ 'images' ][ 'tmp_name' ]; 获取图像 我尝试发送文件，但进入数组对象 FileList，但无法获取文件。我错了什么？

html

<div class="col-12 col-sm-6 pt-sm-3 formimgaj" enctype="multipart/form-data">
 <div class="form-group">
  <input type="file" name="images" accept="image/*" class="form-control-file">
  <input class="btn btn-sm btn-success butt_img_upload" value="upload">
 </div>                                                                                                                 </div>

js

$( '.formimgaj' ).each( function () {
                    var forminput = $( ".form-control-file", this );
                    $(this).find( ".butt_img_upload" ).on( 'click', function ( e ) {
                        e . preventDefault();
                        var form_data = new FormData();
                        form_data.append('images[]', forminput[0].files );
                        form_data.append('type', 'updateimg');
                        new Response(form_data).text().then(console.log)
                        $.ajax({
                            type: 'post',
                            url: 'php/update.php',
                            data: form_data,
                            processData: false,
                            contentType: false,
                            cache: false,
                            success: function ( data ) {
                                console.log(data);
                            }
                        })
                        
                    })
                });

日志

Array
(
    [images] => Array
        (
            [0] => [object FileList]
        )

    [type] => updateimg
)

谢谢

Answer 1

您需要循环遍历 forminput[0].files 中的所有值，并将它们作为单独的项目添加到 form_data 中。您不能将 FileList 对象直接放入 FormData 参数中，它会转换为字符串。

$('.formimgaj').each(function() {
  var forminput = $(".form-control-file", this);
  $(this).find(".butt_img_upload").on('click', function(e) {
    e.preventDefault();
    var form_data = new FormData();
    for (let i = 0; i < forminput[0].files.length; i++) {
      form_data.append('images[]', forminput[0].files[i]);
    }
    form_data.append('type', 'updateimg');
    new Response(form_data).text().then(console.log)
    $.ajax({
      type: 'post',
      url: 'php/update.php',
      data: form_data,
      processData: false,
      contentType: false,
      cache: false,
      success: function(data) {
        console.log(data);
      }
    })

  })
});