Simple AJAX call to upload a file.

پاسخ ها: 1

من سعی می‌کنم کاری نسبتاً ساده انجام دهم (یا اینطور فکر می‌کردم)، با این مشکل که نمی‌توانم خطای واقعی را جدا کنم. خیلی ساده، من یک افزونه ایجاد کرده ام که فرمی را نشان می دهد که در آن از کاربر درخواست می کنم یک فایل csv را آپلود کند. پس از ارسال فرم، یک فراخوانی ajax همه چیز را جمع آوری می کند و تابعی را فراخوانی می کند که به سادگی محتویات را در یک جدول HTML نمایش می دهد (تا کنون). مشکل این است که من یک “POST 404 (یافت نشد)” دریافت می کنم. من نمی توانم بفهمم اینجا چه چیزی را از دست داده ام، چند آموزش را تماشا کرده ام، مثال ها را دنبال کرده ام و غیره…..

<div id="file-upload-form" style="display: none;">
<form id="csv-form" enctype="multipart/form-data">
<label for="csv_file">CSV File Name:</label>
<input type="file" id="csv_file" name="csv_file" accept=".csv">
<button type="button" id="upload-csv">Upload</button>
</form>
</div>
<div id="csv-table"></div>

تماس AJAX من:

$('#upload-csv').on('click', function () {
alert('Doing the right thing');
const fileInput = $('#csv_file')[0].files[0];
if (!fileInput) {
alert('Please select a CSV file.');
return;
}
var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
const formData = new FormData();
formData.append('csv_file', fileInput);
formData.append('action', 'process_csv');
alert(formData);
$.ajax({
//url: ajax_new_obj.ajax_url,
url: ajaxurl,
type: 'post',
data: formData,
processData: false,
contentType: false,
success: function (response) {
if (response.success) {
$('#csv-table').html(response.data);
} else {
alert(response.data);
}
},
error: function (data, status) {
console.log(data, status);
alert('An error occurred while loading this payroll file. Please check the file format and try again.');
}
});
});
});

و در نهایت تابع دریافت من. من می دانم که اگر اقدامات مناسب را اضافه نکنید، بارها می توانید خطای “Bad Request” را دریافت کنید. این کنترل کننده کد من است که به دلیل خطای POST 404 Not Found هرگز اجرا نمی شود.

// Handle AJAX request to process CSV
add_action('wp_ajax_process_csv_file', 'process_csv_file');
add_action('wp_ajax_nopriv_process_csv_file', 'process_csv_file');
function process_csv_file() {
if ( ! wp_verify_nonce( $_POST['nonce'], 'ajax-nonce' ) ) {
die ( 'You do not have permission to access this routine - nonce violation.'); // Die if invalid Nonce
}
if (!empty($_FILES['csv_file']['tmp_name'])) {
$file = $_FILES['csv_file']['tmp_name'];
$csv_data = array_map('str_getcsv', file($file));
$html="<table border="1">";
$html .= '<tr><th>Customer Name</th><th>Date</th></tr>';
foreach ($csv_data as $index => $row) {
if ($index === 0) continue; // Skip header row
$html .= '<tr><td>' . esc_html($row[0]) . '</td><td>' . esc_html($row[1]) . '</td></tr>';
}
$html .= '</table>';
wp_send_json_success($html);
} else {
wp_send_json_error('No file uploaded.');
}
}

من در ابتدا url ajax را در فایل ریشه افزونه خود به این صورت تنظیم کرده بودم:

 
function load_admin_assets() {
wp_enqueue_script('ajax-new', plugins_url('/js/ajax-new.js', __FILE__), array('jquery'), null, true);
wp_localize_script('ajax-new', 'ajax_new_obj', array('ajax_url' => admin_url('admin-ajax.php'),
'baseUrl' => esc_url( home_url() ),
'nonce' => wp_create_nonce('ajax-nonce')));
}
add_action('admin_enqueue_scripts', 'load_admin_assets');

این نیز کار نکرد، بنابراین من به رویکرد بالا یعنی کدگذاری سخت URL ajax در کد رفتم، هیچ عشقی برگردانده نشد. من اکثر بحث‌ها را با هم عوض کرده‌ام، از جمله مواردی که فکر می‌کنم امتحان کنم، اما هیچ عشقی برگردانده نشد. من همچنین منابع nonce را به طور کامل حذف کرده ام، به این فکر می کنم که ممکن است ریشه آن باشد. چنین شانسی نیست…. آیا کسی می تواند با دانشی که من می توانم برای ردیابی منبع مشکل انجام دهم کمک کند؟ خطای ‘404 Not Found’ بسیار مبهم است و من در مورد چگونگی حفاری عمیق تر دانش کافی ندارم. با تشکر و سلامتی!

این خبر را در ایران وب سازان مرجع وب و فناوری دنبال کنید

مشاهده پاسخ های این مطلب
———————————————
این مطلب از سایت انجمن وردپرس گردآوری شده است و کلیه حقوق مطلق به انجمن وردپرس می باشد در صورت مغایرت و یا بروز مشکل اطلاع دهید تا حذف گردد

منبع: انجمن وردپرس

Copy URL
URL Copied