如何通过jQuery ajax传递具有多个属性的文件对象

Question

I am trying to pass a file object with multiple attribute via AJAX in my WordPress application but not being able to capture them in the process function.

HTML:

<form enctype="multipart/form-data" method="post">
   <input type="text" id="album_title" name="album_title" />
   <input type="file" multiple" id="photo_upload" name="photo_upload[]" class="files-data" />
   <input type="button" value="Submit" onclick="uploadPhoto();" />
</form>

JS:

var formData = new FormData();

formData.append('album_title', jQuery('#album_title').val());
formData.append('security', mbAlbumUploader.ajax_nonce);

jQuery.each(jQuery('.files-data'), function(i, obj) {
   jQuery.each(obj.files, function(j, file){
       formData.append('files[' + j + ']', file);
   });
});

jQuery.ajax({
   url: 'mbAlbumUploader.ajax_url,'
   type: 'post',
   data: formData,
   dataType: 'json',
   processData: false,
   contentType: false,
   success: function(response) {
     alert(response.files);
   }
});

PHP function:

function uploadPhoto() {
   $fileName_str = '';
   foreach($_FILES['photo_upload']['name'] as $f=>$name) {
      $extension = pathinfo($name, PATHINFO_EXTENSION);
      $fileName_str .= $name . ', ';
   }
   die(wp_json_encode(array(
     'files' => $fileName_str;
   )));
}

What I am doing wrong?

Answer 1

Try to run ajax request by click event or submit event. I made few changes this is script below. Assuming your button has update class.

HTML

<form enctype="multipart/form-data" method="post">
    <input type="text" id="album_title" name="album_title" />
  <input id="file" name="file[]" type="file"  multiple/>
  <input class="update" type="submit" />
</form>

JavaScript

$(".update").click(function(e) {
        // Stops the form from reloading
        e.preventDefault();

            $.ajax({
            url: 'upload.php',
            type: 'POST',
            contentType:false,
            processData: false,
            data: function(){
                var data = new FormData();

                data.append('album_title', jQuery('#album_title').val());
                data.append('security', mbAlbumUploader.ajax_nonce);

                jQuery.each(jQuery('#file')[0].files, function(i, file) {
                    data.append('file-'+i, file);
                });
                data.append('body' , $('#body').val());
                data.append('uid', $('#uid').val());
                return data;
            }(),
                success: function(result) {
                alert(result);
                },
            error: function(xhr, result, errorThrown){
                alert('Request failed.');
            }
            });
            $('#picture').val('');
    $('#body').val('');
    });

PHP (upload.php)

You can Access your files from $_FILES global.