Question

我试图在我的WordPress应用程序中通过AJAX传递一个具有多个属性的文件对象，但是无法在过程函数中捕获它们。

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 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;
   )));
}

我做错了什么？

Answer 1

尝试通过点击事件或提交事件来运行ajax请求。我做了一些改动，这是下面的脚本。假设你的按钮有更新类。

<强> 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）

您可以从$ _FILES global。

访问您的文件

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

1 个答案: