Múltiplos Uploads com PHP, Mysql e Ajax - #8 Formulário

Nessa videoaula estruturaremos o formulário que receberá o upload de arquivos, já criando toda a base com a tabela de arquivos e a barra de progresso.

Criando o Formulário

Na página inicial criaremos o formulário de upload de arquivos. Para isso, precisaremos preencher todos os campos da tabela do nosso banco de dados.

<div class="main">
    <form name="form" id="form" method="post" enctype="multipart/form-data" action="<?php echo DIRPAGE.'controllers/controllerAds'; ?>">
        <div class="fields"><input type="text" id="action" name="action"></div>
        <div class="fields"><input type="text" id="nextId" name="nextId"></div>
        <div class="fields"><input type="text" name="title" id="title" placeholder="Título:" required></div>
        <div class="fields"><textarea name="content" id="content" placeholder="Conteúdo:" required></textarea></div>
        <div class="divFiles">
            <table class="tableUpload">
                <thead>
                    <tr>
                        <th>Arquivo</th>
                        <th>Ação</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Nome do arquivo</td>
                        <td>
                            <a href=""><img src="<?php echo DIRPAGE.'img/button-view.png'; ?>" alt="Visualizar"></a>
                            <a href=""><img src="<?php echo DIRPAGE.'img/button-trash.png'; ?>" alt="Excluir"></a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="bar"><div class="progress"></div></div>
        <div class="fields"><label class="filesLabel" for="files"><input type="file" name="files" id="files">Enviar arquivos</label></div>
        <div class="fields"><input type="submit" value="Salvar"></div>
    </form>
</div>

Na nossa index vamos linkar o nosso css:

<link rel="stylesheet" href="<?php echo DIRPAGE.'lib/css/style.css'; ?>">

A estilização do CSS para o formulário, para a tabela e para a barra de progresso ficará da seguinte forma:

*{margin:0;padding:0;box-sizing: border-box;font-family: Arial,sans-serif;background: #eee;}

.main{width:50%;margin:10px auto;}

.fields input[type='text']{width:100%;height: 40px;margin: 10px 0;padding: 0 10px;font-size: 16px;background: #fff;}
.fields input[type='submit']{width: 30%;margin: 10px auto;padding: 10px 5px;font-size: 18px;font-weight: bold;background: #2d607f;color:#fff;border: none;cursor: pointer;}
.fields input[type='file']{display:none;}
.fields .filesLabel{display:inline-block; padding: 5px 10px;margin: 10px auto;background: #ccc;border-radius: 2px;border: 1px solid #aaa;cursor: pointer;}
.fields textarea{width: 100%;height: 200px;margin: 10px 0;font-size: 16px;background: #fff;padding: 10px;}

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

.tableUpload{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;}

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