{"id":27879,"date":"2021-05-27T14:30:00","date_gmt":"2021-05-27T11:30:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27879"},"modified":"2021-10-18T04:08:52","modified_gmt":"2021-10-18T01:08:52","slug":"como-integrar-o-upload-de-arquivos-ajax-no-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-integrar-o-upload-de-arquivos-ajax-no-wordpress\/","title":{"rendered":"Como integrar o upload de arquivos Ajax no WordPress"},"content":{"rendered":"

Voc\u00ea deseja implementar o upload de arquivo Ajax no WordPress? \u00c0s vezes, voc\u00ea precisa executar uma tarefa que carregue um arquivo por meio do Ajax. Neste artigo, estudamos como fazer upload de arquivo Ajax no WordPress.<\/p>\n

Um benef\u00edcio de fazer upload de arquivos por meio do Ajax \u00e9 reduzir a carga do servidor. Sua p\u00e1gina n\u00e3o ser\u00e1 recarregada, o que economiza chamadas extras para um servidor e, consequentemente, a largura de banda. Ele tamb\u00e9m adiciona uma melhor experi\u00eancia do usu\u00e1rio ao seu site.<\/p>\n

Normalmente, ao trabalhar com Ajax, damos uma chamada para URL e passamos dados para ou obtemos dados da URL especificada. O WordPress tem uma maneira ligeiramente diferente de realizar opera\u00e7\u00f5es Ajax. No WordPress, fazemos uma chamada para a URL, mas o c\u00f3digo que escrevemos para processar os dados ir\u00e1 para a fun\u00e7\u00e3o. Ent\u00e3o, essa fun\u00e7\u00e3o precisa ser mapeada com o valor de ‘a\u00e7\u00e3o’ passado nos par\u00e2metros Ajax. Confuso? Vamos ver em a\u00e7\u00e3o.<\/p>\n

Upload de arquivo Ajax no WordPress<\/h3>\n

Para come\u00e7ar, voc\u00ea precisa de um formul\u00e1rio com a entrada do arquivo. Damos uma chamada Ajax na sele\u00e7\u00e3o de um arquivo e carregamos o arquivo para um servidor. Para criar um formul\u00e1rio, adicione o HTML abaixo ao seu modelo de p\u00e1gina.<\/p>\n

<form class=\"fileUpload\" enctype=\"multipart\/form-data\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label><?php _e('Choose File:'); ?><\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" id=\"file\" accept=\"image\/*\" \/>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/form><\/code><\/pre>\n
Em seguida, voc\u00ea deve dar uma chamada Ajax no evento de mudan\u00e7a de entrada do arquivo. Como estamos passando o conte\u00fado de um arquivo para o Ajax, seu c\u00f3digo ser\u00e1 um pouco diferente em compara\u00e7\u00e3o com o c\u00f3digo jQuery regular do WordPress Ajax<\/a>.<\/p>\n
Incluir arquivo JS no WordPress<\/h4>\n
Vamos primeiro incluir o arquivo JS em um ambiente WordPress. Este c\u00f3digo ir\u00e1 dentro do functions.php<\/code>arquivo ou em um plugin espec\u00edfico do site.<\/p>\n
function aw_scripts() {\n\u00a0\u00a0\u00a0\u00a0\/\/ Register the script\n\u00a0\u00a0\u00a0\u00a0wp_register_script( 'aw-custom', get_stylesheet_directory_uri(). '\/js\/custom.js', array('jquery'), '1.1', true );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Localize the script with new data\n\u00a0\u00a0\u00a0\u00a0$script_data_array = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'ajaxurl' => admin_url( 'admin-ajax.php' ),\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0wp_localize_script( 'aw-custom', 'aw', $script_data_array );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Enqueued script with localized data.\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script( 'aw-custom' );\n}\n\u00a0\nadd_action( 'wp_enqueue_scripts', 'aw_scripts' );<\/code><\/pre>\n
Carregar arquivo no servidor<\/h4>\n
Voc\u00ea est\u00e1 pronto com o formul\u00e1rio e o arquivo JS. Agora, adicione o c\u00f3digo abaixo no arquivo JS que enviar\u00e1 o conte\u00fado do arquivo para o lado do servidor por meio do Ajax.<\/p>\n
custom.js<\/strong><\/p>\n
jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0$('body').on('change', '#file', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this = $(this);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0file_data = $(this).prop('files')[0];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data = new FormData();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('file', file_data);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('action', 'file_upload');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.ajax({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: aw.ajaxurl,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: 'POST',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0contentType: false,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0processData: false,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data: form_data,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0success: function (response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this.val('');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert('File uploaded successfully.');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\u00a0\u00a0\u00a0 \n});<\/code><\/pre>\n
A parte importante do c\u00f3digo acima \u00e9 que anexamos uma a\u00e7\u00e3o ‘file_upload’ ao objeto form_data. Usaremos esta a\u00e7\u00e3o ‘file_upload’ para prosseguir com os dados do formul\u00e1rio.<\/p>\n
No functions.php<\/code>, mapeie esta a\u00e7\u00e3o com o Ajax da seguinte maneira:<\/p>\n
add_action( 'wp_ajax_file_upload', 'file_upload_callback' );\nadd_action( 'wp_ajax_nopriv_file_upload', 'file_upload_callback' );<\/code><\/pre>\n
Se voc\u00ea est\u00e1 escrevendo este c\u00f3digo em um plugin, n\u00e3o precisa escrever uma segunda instru\u00e7\u00e3o. Aqui, ao ‘wp ajax_’ e ‘wp_ajax_nopriv ‘, anexamos o valor da a\u00e7\u00e3o que \u00e9 ‘file_upload’. O segundo par\u00e2metro ‘file_upload_callback’ \u00e9 o m\u00e9todo de retorno de chamada que ter\u00e1 o c\u00f3digo real para upload de arquivo.<\/p>\n
function file_upload_callback() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$arr_img_ext = array('image\/png', 'image\/jpeg', 'image\/jpg', 'image\/gif');\n\u00a0\u00a0\u00a0\u00a0if (in_array($_FILES['file']['type'], $arr_img_ext)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$upload = wp_upload_bits($_FILES[\"file\"][\"name\"], null, file_get_contents($_FILES[\"file\"][\"tmp_name\"]));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/$upload['url'] will gives you uploaded file path\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}<\/code><\/pre>\n
Estou usando um m\u00e9todo wp_upload_bits<\/a> para enviar arquivos em um servidor. Este m\u00e9todo armazena diretamente um arquivo dentro do diret\u00f3rio wp-content \/ uploads.<\/p>\n
V\u00e1 em frente e tente fazer o upload de um arquivo. Seu arquivo deve ser carregado na pasta wp-content \/ uploads \/. Observe que voc\u00ea encontrar\u00e1 seu arquivo na pasta do m\u00eas atual do diret\u00f3rio de uploads.<\/p>\n
Fa\u00e7a upload de v\u00e1rios arquivos usando Ajax no WordPress<\/h3>\n
At\u00e9 agora, discutimos o upload de um \u00fanico arquivo por meio do Ajax. Pode haver uma situa\u00e7\u00e3o em que voc\u00ea deseja fazer upload de v\u00e1rios arquivos usando Ajax. Vamos ver como conseguir isso.<\/p>\n
Para enviar v\u00e1rios arquivos, voc\u00ea precisa fazer pequenas altera\u00e7\u00f5es no c\u00f3digo HTML, JS e PHP acima.<\/p>\n
HTML fornece um atributo ‘m\u00faltiplo’ que permite ao usu\u00e1rio selecionar v\u00e1rios arquivos na entrada do arquivo.<\/p>\n
C\u00f3digo HTML<\/strong><\/p>\n
<form class=\"fileUpload\" enctype=\"multipart\/form-data\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label><?php _e('Choose File:'); ?><\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" id=\"file\" accept=\"image\/*\" multiple \/>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/form><\/code><\/pre>\n
Como um usu\u00e1rio vai selecionar v\u00e1rios arquivos, precisamos alterar o c\u00f3digo JavaScript que percorre cada arquivo e constr\u00f3i um array a partir dele.<\/p>\n
custom.js<\/strong><\/p>\n
jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0$('body').on('change', '#file', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this = $(this);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0file_obj = $this.prop('files');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data = new FormData();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for(i=0; i<file_obj.length; i++) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('file[]', file_obj[i]);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('action', 'file_upload');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.ajax({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: aw.ajaxurl,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: 'POST',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0contentType: false,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0processData: false,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data: form_data,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0success: function (response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this.val('');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert('File(s) uploaded successfully.');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n});<\/code><\/pre>\n
E, finalmente, na fun\u00e7\u00e3o de retorno de chamada do Ajax, percorremos a matriz de arquivos e carregamos cada arquivo em um servidor.<\/p>\n
function file_upload_callback() {\n\u00a0\u00a0\u00a0\u00a0$arr_img_ext = array('image\/png', 'image\/jpeg', 'image\/jpg', 'image\/gif');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0for($i = 0; $i < count($_FILES['file']['name']); $i++) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (in_array($_FILES['file']['type'][$i], $arr_img_ext)) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$upload = wp_upload_bits($_FILES['file']['name'][$i], null, file_get_contents($_FILES['file']['tmp_name'][$i]));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/$upload['url'] will gives you uploaded file path\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}<\/code><\/pre>\n
Espero que voc\u00ea conhe\u00e7a o upload de arquivos Ajax no WordPress. Eu gostaria de ouvir seus pensamentos e sugest\u00f5es na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n
Artigos relacionados<\/h4>\n