Múltiplos Uploads com PHP, Mysql e Ajax - #10 Iniciando com Ajax

Na aula de hoje iniciaremos com o ajax propriamente dito, fazendo o upload dos arquivos.

Finalizando estilo do formulário

Como falamos anteriormente, a barra de progresso e as tabelas de arquivos virão de forma dinâmica. Para tanto, colocaremos um display none nesses elementos para que eles apareçam somente quando forem acionados através de um upload:

.bar{display:none; width:100%; height: 20px; border: 1px solid #ccc; padding: 2px;}
.progress{width: 30%; height: 100%;  background: #05546b;}

.tableUpload{display:none; width: 100%; text-align: center;}
.tableUpload thead tr{ color:#fff; font-weight: bold;}
.tableUpload thead th{background: #333; padding: 5px 0;}
.tableUpload thead th:first-child{width: 70%;}
.tableUpload tbody tr:nth-child(2n){background: #ddd;}
.tableUpload tbody td{padding: 5px 0;}

.divFiles{display:none;}

No nosso formulário ainda, faremos um pequeno ajuste no nosso botão de upload:

<input type="file" name="files[]" id="files" multiple>

Implementando o ajax

Dentro do diretório lib/js criaremos o arquivo javascript.js

(function readyJS(win,doc){
    'use strict';

    //Get absolute path
    function getRoot()
    {
        return win.location.protocol+"//"+doc.location.hostname+"/";
    }

    //Upload
    function upload()
    {
        let ajax=new XMLHttpRequest();
        let formData=new FormData(doc.querySelector('#form'));
        ajax.open('POST',getRoot()+'controllers/controllerUpload');
        ajax.send(formData);
    }

    if(doc.querySelector('#files')){
        let files=doc.querySelector('#files');
        files.addEventListener('change',upload,false);
    }
})(window,document);

Após criar o arquivo javascript.js, não esqueça de chamá-lo no seu arquivo principal:

<script src="<?php echo DIRPAGE.'lib/js/javascript.js'; ?>"></script>

Gravando a variável

Vamos receber nossa variável no arquivo variables.php

if(isset($_FILES['files'])){$files=$_FILES['files']; $count=count($files['name']);}else{$files="";$count="";}

controllerUpload

O controllerUpload é o arquivo PHP que fará a movimentação do arquivo no servidor:

<?php
for($i=0; $i<$count; $i++){
    move_uploaded_file($files['tmp_name'][$i],DIRREQ.'img/files/'.$files['name'][$i]);
}

Não esqueça de criar a pasta files dentro de /img

Verificando a capacidade de upload do servidor

Um detalhe que tem que ser verificado quando trabalhamos com upload de arquivos é a capacidade do servidor de envio de arquivos. Alguns servidores aceitam 20MB, outros aceitam 64MB e outros aceitam tamanhos de arquivos maiores. Se você tentar enviar um arquivo com tamanho superior ao permitido pelo seu servidor vai dar erro. Verifique com a sua hospedagem.

No localhost, configure seu php pra aceitar o tamanho que você deseja. Para isso, altere os parâmetros post_max_size e upload_max_filesize

Por hoje é só! Sucesso nos códigos e na vida!