Tutorial ensinando a enviar um arquivo por Ajax, utilizando apenas Javascript e processando o upload com PHP.
Para fazer upload de um arquivo por AJAX iremos utilizar o código a seguir.
Com o objetivo de facilitar o entendimento, irei quebra-lo em várias partes.
Até ai nada de especial, formulário contendo nosso input do tipo “file”.
Vamos criar uma div com id “feedback” para passarmos o progresso e status do upload do arquivo.
...
Crie um arquivo “enviar.php” com código a seguir.
if (isset($_FILES['meu_arquivo']) && !empty($_FILES['meu_arquivo']['name'])) { /*Arquivo está sendo enviado para pasta UPLOAD */ $move_upload_rs = move_uploaded_file($_FILES['file']['tmp_name'], "upload/" . $_FILES['meu_arquivo']['name']); if($move_upload_rs){ $resultado = array('status' => 'ok'); }else{ $resultado = array('error' => 'fail'); } } else { $resultado = array('error' => 'fail'); } header('Content-Type: application/json'); echo json_encode($resultado); die();
Upload está sendo feito para pasta “upload” que está no mesmo diretório do arquivo que acabamos de criar.
Declarando as variáveis necessárias para o envio.
var $formulario = document.getElementById('form_envio'); var $status = document.getElementById('div_status');
Para enviar um arquivo por Ajax iremos utilizar XMLHttpRequest, uma API que permite o envio de dados entre um cliente e servidor, presente nos navegadores mais modernos.
O Código JS abaixo está comentado, não esqueça que este código tem que ir dentro da tag “” juntamente com as variáveis acima.
$formulario.addEventListener('submit', function(event){ var xhr = new XMLHttpRequest(); xhr.open("POST", $formulario.getAttribute('action')); var data = new FormData($formulario); /* Envio os dados */ xhr.send(data); /* Listener para acompanhar a mudança do estado da requisição aberta */ xhr.addEventListener('readystatechange', function() { /* Valido se o HTTP code retornado está OK */ if (xhr.readyState === 4 && xhr.status == 200) { /* Converto a resposta p/ obj Json*/ var json = JSON.parse(xhr.responseText); /* Conforme retornado pelo meu arquivo PHP utilizado para salvar o arquivo, informo o feedback final */ /* Você pode trabalhar os status no arquivo PHP, dando mais respostas dos possíveis erros que podem ocorrer */ if (!json.error && json.status === 'ok') { $status.innerHTML += 'Arquivo enviado com sucesso'; } else { $status.innerHTML = 'Não foi possível enviar o arquivo'; } } }); /* Listerner para acompanhar o progresso do upload e atualizar no status a porcentagem */ xhr.upload.addEventListener("progress", function(e) { if (e.lengthComputable) { /* Calculo a porcentagem já enviada */ var percentage = Math.round((e.loaded * 100) / e.total); /* Passo o valor para minha div status */ $status.innerHTML = String(percentage) + '%'; } }, false); /* Mais um listener para observar o evento "load", quando a requisição é totalmente concluída */ xhr.upload.addEventListener("load", function(e){ /* passo para minha div status que está 100% concluído */ $status.innerHTML = String(100) + '%'; }, false); }, false);
Segurança: Atualizações frequentes geralmente incluem patches de segurança para corrigir vulnerabilidades identificadas. Ao manter o Magento atualizado, você reduz significativamente…
Como adicionar uma mensagem de Alerta ou Aviso do Admin do Magento 2 Injete o Magento\Framework\Message\ManagerInterface no construtor da sua…
Para exibir as mensagens adicionadas na classe Magento\Framework\Message\ManagerInterface em um arquivo .phtml, você pode usar o seguinte código: <?php $objectManager…
Para criar um script no Magento 2 que exporte as categorias para um arquivo XML com o nome da categoria,…
Para definir um vídeo MP4 como plano de fundo em um <div> usando HTML e CSS, você pode seguir estas…
Como desativar o "lastname" no Magento 2 e Adobe Commerce Desativando a obrigatoriedade do campo Execute a SQL abaixo diretamente…