使用Ajax提交文件上传的WordPress表单

Here is some tips to make work your provided form:

Form:

I removed placeholder=\\\"<?php echo $field->label ?>\\\" from your text input, because it\'s coming from custom code, which you didn\'t provide.

Ajax.js:

NOTE: You\'re using var form_elm = jQuery(this);, which returns object of jquery with all Form content. That\'s why I used it for accessing input information. Instead you can access to form inputs with their name, class, id, placeholder and etc.

What changed:

1. removed (function($) {} wrapper and instead used jQuery(document).ready(function ($) {});. This is just for note. There is no need to wrapp your jquery to have access to $.

2. We\'re getting file and name from inputs with lines below:

   var file = form_elm[0][1].files[0]; var customer_field_text = form_elm[0][0].value;

   1 2 3

   var file = form_elm[0][1].files[0]; var customer_field_text = form_elm[0][0].value;

3. We\'re adding action for WordPress and form inputs with their values into FormData:

   form_data.append(\'action\', action); form_data.append(\'customer-field-upload\', file); form_data.append(\'customer-field-name\', customer_field_text);

   1 2 3 4

   form_data.append(\'action\', action); form_data.append(\'customer-field-upload\', file); form_data.append(\'customer-field-name\', customer_field_text);

   Here you can change the name of array we\'re sending. For ex., we will recieve file in the array with key customer-field-upload and can use it such way:

   $_FILES[\'customer-field-upload\']

   1 2	$_FILES[\'customer-field-upload\']

4. async : true: this line we don\'t need. It\'s true by default. enctype: \'multipart/form-data\', we don\'t need, too.
5. data: form_data,: we are sending everything only using one form_data variable( FormData object ).

PHP file:

1. I didn\'t use add_action(\'wp_ajax_nopriv_form_submit1\', \'handle_form_submission\'); because there is nothing related to nonce in your provided code

2. Your $_POST will contain:

   Array ( [action] => form_submit1 //action, which we used to send and accept Ajax request [customer-field-name] => some input value in the name field )

   1 2 3 4 5 6

   Array (    [action] => form_submit1 //action, which we used to send and accept Ajax request    [customer-field-name] => some input value in the name field )

   You can access to name input using $_POST[\'customer-field-name\'].

3. Your $_FILES will contain:

   Array ( [customer-field-upload] => Array ( [name] => input file name [type] => input file type [tmp_name] => temp file [error] => 0 [size] => some size ) )

   1 2 3 4 5 6 7 8 9 10 11 12 13

   Array (     [customer-field-upload] => Array         (             [name] => input file name             [type] => input file type             [tmp_name] => temp file             [error] => 0             [size] => some size         )   )

   You can work with input file using $_FILES[\'customer-field-upload\']

EDIT: Appended functional to add all inputs with several lines of code:

Form:

Ajax.js:

Here we used Jquery iterator to add several values from the loop into the FormData object. This is example and can be applied for checkboxes, textareas and etc.

You are missing enctype: \'multipart/form-data\' and contentType: false to prevent jQuery from setting it to string. If that doesn\'t work, see this example and follow the same method

Your Jquery is missing the

This is quite important when you are submitting the forms. This allows the form data to be sent without any conversions.