Please try below code :
script.js
jQuery(function($) {
var i;
for(i=1;i<21;i++){
$('body').on('change', '#file'+i, function() {
var file_data = $(this).prop('files')[0];
var id = $(this).attr('id');
var form_data = new FormData();
form_data.append('file', file_data);
form_data.append('action', 'file_upload');
jQuery.ajax({
url: pw_script_vars.ajax_url,
type: 'POST',
contentType: false,
processData: false,
data: form_data,
success: function (response) {
alert( response.alert );
}
});
});
}
});
functions.php
add_action('wp_enqueue_scripts','owr_scripts_function', 20);
function owr_scripts_function() {
wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/script.js', array('jquery'), time(), false);
wp_localize_script(
'script',
'pw_script_vars',
array(
'ajax_url' => admin_url('admin-ajax.php'),
)
);
}
add_action( 'wp_ajax_file_upload', 'file_upload_callback' );
add_action( 'wp_ajax_nopriv_file_upload', 'file_upload_callback' );
function file_upload_callback(){
$response = [];
$response['alert'] = __('Hey! You have clicked the button!', 'pippin');
$response['message'] = __('You have clicked the other button. Good job!', 'pippin');
wp_send_json($response);
wp_die("upload success");
}