Italiano
Español
RomânăWordPress AJAX Загрузка Файлов - Фронтенд
Я просмотрел все туториалы по загрузке файлов через AJAX во WordPress на фронтенде, которые смог найти. Пока ничего не работает. Наиболее понятным мне показался этот: http://theaveragedev.com/wordpress-files-ajax/
Вот мой код:
В файле шаблона example.php
<script>var ajax_url = "<?php echo admin_url('admin-ajax.php'); ?>"</script>
<form id="file_form">
<?php wp_nonce_field('ajax_file_nonce', 'security'); ?>
<input type="hidden" name="action" value="my_file_upload">
<label for="file_upload">Это загрузка файла...</label>
<input type="file" name="file_upload">
<input type="submit" value="Отправить">
</form>
Это в файле ajax-file-upload.js
jQuery(document).ready(function(){
var form_data = {};
$(this).find('input').each(function(){
form_data[this.name] = $(this).val();
});
$('#file_form').ajaxForm({
url: ajax_url, // на стороне админки, сделайте сами на фронтенде
data: form_data,
type: 'POST',
contentType: 'json',
success: function(response){
alert(response.message);
}
});
});
Это в моем functions.php
function q_scripts(){
$src = get_template_directory_uri().'/js/ajax-file-upload.js';
wp_enqueue_script('my_ajax_file_uploader_thing', $src, array('jquery', 'jquery-form'));
}
add_action('init', 'q_scripts');
function handle_file_upload(){
check_ajax_referer('ajax_file_nonce', 'security');
if(!(is_array($_POST) && is_array($_FILES) && defined('DOING_AJAX') && DOING_AJAX)){
return;
}
if(!function_exists('wp_handle_upload')){
require_once(ABSPATH . 'wp-admin/includes/file.php');
}
$upload_overrides = array('test_form' => false);
$response = array();
foreach($_FILES as $file){
$file_info = wp_handle_upload($file, $upload_overrides);
// сделать что-то с информацией о файле...
$response['message'] = 'Готово!';
}
echo json_encode($response);
die();
}
add_action('wp_ajax_my_file_upload', 'handle_file_upload');
Я пробовал добавить enctype в элемент формы, но это не помогло. Я продолжаю получать оповещение с текстом 'undefined'. Кто-нибудь знает, как исправить эту проблему?
РЕДАКТИРОВАНИЕ
Проблема с 'undefined' теперь исчезла, так как я отредактировал js файл, добавив событие click и изменив селектор для цикла ввода формы:
jQuery(document).ready(function($){
$('#file_form :submit').click(function() {
var form_data = {};
$('#file_form').find('input').each(function () {
form_data[this.name] = $(this).val();
});
console.log(form_data);
$('#file_form').ajaxForm({
url: ajax_url, // на стороне админки, сделайте сами на фронтенде
data: form_data,
type: 'POST',
contentType: 'json',
success: function (response) {
alert(response.message);
},
error: function (response) {
console.log('error');
}
});
return false;
});
});
Файлы все еще не загружаются в папку медиафайлов. Я также хочу получить URL загруженного файла после загрузки.
Я вывожу в консоль объект файла, чтобы видеть, что происходит. Вот пример:
Object {security: "e6db2a6eee", _wp_http_referer: "/chat?sessionappid=138", action: "my_file_upload", file_upload: "C:\fakepath\download.jpg", "": "Go"}
Есть ли что-то неправильное в этом и является ли это причиной того, что загрузка не работает?
Это вопрос или ответ? Пожалуйста, не публикуйте дампы кода без каких-либо пояснений.
fuxia
Хорошо, мы обновили мой код, и это ответ для руководства по загрузке файлов через AJAX во фронтенде WordPress
Adnan Limdiwala
Ответ работает отлично. Почему он не отмечен как правильный? В коде js была ошибка. Исходный вариант был --> }error: а правильный вариант }, error: (пропущена запятая после })
Alaksandar Jesus Gene
Вау... Это сработало для меня! Спасибо!
Neenu Chandran
нужно объяснение
730wavy