Hi You have Use this COde For WordPress front-end AJAX file upload tutorial Code
Here is my code:
In my template file example.php
<form enctype="multipart/form-data">
<input type="text" name="support_title" class="support-title">
<input type="file" id="sortpicture" name="upload">
<input class="save-support" name="save_support" type="button" value="Save">
</form>
This is in ajax-file-upload.js
jQuery(document).on('click', '.save-support', function (e) {
var supporttitle = jQuery('.support-title').val();
var querytype = jQuery('.support-query').val();
var file_data = jQuery('#sortpicture').prop('files')[0];
var form_data = new FormData();
if (supporttitle == '') {
jQuery('.support-title').css({"border": "1px solid red"})
return false;
} else {
jQuery('.support-title').css({"border": "1px solid #e3ecf0"})
}
form_data.append('file', file_data);
form_data.append('action', 'md_support_save');
form_data.append('supporttitle', supporttitle);
jQuery.ajax({
url: '<?php echo admin_url('admin-ajax.php'); ?>',
type: 'post',
contentType: false,
processData: false,
data: form_data,
success: function (response) {
jQuery('.Success-div').html("Form Submit Successfully")
},
error: function (response) {
console.log('error');
}
});
});
});
This iS functions.php code
add_action( 'wp_ajax_md_support_save','md_support_save' );
add_action( 'wp_ajax_nopriv_md_support_save','md_support_save' );
function md_support_save(){
$support_title = !empty($_POST['supporttitle']) ?
$_POST['supporttitle'] : 'Support Title';
if (!function_exists('wp_handle_upload')) {
require_once(ABSPATH . 'wp-admin/includes/file.php');
}
// echo $_FILES["upload"]["name"];
$uploadedfile = $_FILES['file'];
$upload_overrides = array('test_form' => false);
$movefile = wp_handle_upload($uploadedfile, $upload_overrides);
// echo $movefile['url'];
if ($movefile && !isset($movefile['error'])) {
echo "File Upload Successfully";
} else {
/**
* Error generated by _wp_handle_upload()
* @see _wp_handle_upload() in wp-admin/includes/file.php
*/
echo $movefile['error'];
}
die();
}