How to submit wordpress form (file & name) with ajax [duplicate] - php

Question

This question already has answers here:
How can I upload files asynchronously with jQuery?
(34 answers)
Closed 6 years ago.
I am a new developer. I have created a plugin for data insert WP dashboard. I am trying to insert images in my database. I am trying to form submit with Ajax in WordPress. There is my code. When I use input type=text data submitted successfully, but when I use input type=file then data not submitted. I want all data inserted in my database and file saved in the upload folder.
<form id="ajax_form" method="" action="<?php echo $_SERVER['REQUEST_URI']; ?> " enctype="multipart/form-data">
<table class='wp-list-table widefat fixed'>
<tr>
<th class="ss-th-width">Code</th>
<td><input type="text" name="code" value="<?php echo $code; ?>" class="ss-field-width" /></td>
</tr>
<tr>
<th class="ss-th-width">School</th>
<td><input type="text" name="name" value="<?php echo $name; ?>" class="ss-field-width" /></td>
</tr>
<tr>
<th class="ss-th-width">Image</th>
<td><?php wp_nonce_field('ajax_file_nonce', 'security'); ?>
<input type="hidden" name="action" value="my_file_upload">
<label for="file_upload">It's a file upload...</label>
<input type="file" name="file_upload">
</td>
</tr>
</table>
<input type='submit' name="insert" value='Save' class='button'>
</form>
Ajax code is here:
jQuery('#ajax_form').submit(ajaxformdata);
function ajaxformdata()
{
var alldata = jQuery(this).serialize();
jQuery.ajax({
type:"POST",
//url: "/wp-admin/admin-ajax.php?action=signup",
url: "/mywp/wp-admin/admin-ajax.php?action=cruddata",
data: alldata,
success:function(data)
{
alert('Data submited');
},
error: function(errorThrown)
{
alert(errorThrown);
}
});
return false;
}
PHP code is here
<?php
function cruddata()
{
global $wpdb;
$code = $_POST["code"];
$name = $_POST["name"];
$imagesss = basename($_FILES["photo"]["name"]);
$table_name = $wpdb->prefix . "school";
$wpdb->insert(
$table_name, //table
array
(
'code' => $code,
'name' => $name
//'image_name' => $imagesss
);
$message.="Data inserted";
}
add_action( 'wp_ajax_cruddata', 'cruddata' );

Answer 1

Try this - On your JS your url should be ajaxurl, and action should be cruddata Hope this will works fine.
Register a method that perform your functionality
add_action('wp_ajax_cruddata', 'cruddata');
add_action('wp_ajax_nopriv_cruddata', 'cruddata');
Your function defination -
function cruddata() {
// code goes here...
}
Javascript:
jQuery.ajax({
data: {
'action': 'cruddata',
},
dataType: 'json',
type: 'post',
url: ajaxurl,
beforeSend: function () {
//
},
success: function (data) {
//
}
});