Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá, na parte de enviar eu conseguir, mas manter até terminar o cadastro eu não conseguir. Eu vou contar toda a história para ficar mais claro possível.
Eu precisei implementar um Upload de qualquer imagem ou PDF na página de solicitar compras. O site utiliza AngularJS, a primeira versão do Angular. Eu tentei fazer sem depender de PHP, mas na internet achava só a parte de Front-End e ninguém sabia fazer no Back-End. Então eu resolvi fazer com PHP mesmo.
Nó código PHP, ele aceita todos as extensões de imagens mais o PDF e é possível envia-los todos de uma vez na quantidade que quiser. Todos os arquivos serão renomeados, contendo no nome o ID do usuário logado pego pela função javascript, o dia do mês, o mês, o ano, o dia da semana, a hora, o minuto, o segundo, se é AM ou PM e uma numeração aleatório. O arquivo PDF vai continuar sendo PDF e todas as imagens serão JPG. No final, todos serão enviados para uma pasta chamada upload.
Só que agora eu preciso jogar de volta para página para salvar os novos nomes dos arquivos para continuar o cadastro da solicitação de compras. Como AngularJS utiliza Javascript, eu tentei usa-lo dentro do PHP utilizando EOF, mas não tive resultado. Eu só consigo com HTML com as diretivas do AngularJS. Na parte do API, nos atributos, eu declarei "nomeArquivo: []," , para salvar os nomes dos arquivos.
Seguem o código.
<div class="row">
<div class="col-sm-12 col-md-6 ">
<div class="upload_form_cont">
<form id="upload_form" enctype="multipart/form-data" method="post" action="/profile-upload">
<div>
<div><label for="image_file">Selecione o arquivo de imagem</label></div>
<div><input type="file" name="image_file" id="image_file" accept="image/*" onchange="fileSelected();" /></div>
</div>
<div>
<input type="button" value="Upload" onclick="startUploading()" />
</div>
<div id="fileinfo">
<div id="filename"></div>
<div id="filesize"></div>
<div id="filetype"></div>
<div id="filedim"></div>
</div>
<div id="error">Você deve selecionar apenas arquivos de imagem válidos!</div>
<div id="error2">Ocorreu um erro ao enviar o arquivo</div>
<div id="abort">O upload foi cancelado pelo usuário ou o navegador interrompeu a conexão</div>
<div id="warnsize">Seu arquivo é muito grande. Não podemos aceitar isso. Selecione arquivos pequenos</div>
<div id="progress_info">
<div id="progress"></div>
<div id="progress_percent"> </div>
<div class="clear_both"></div>
<div>
<div id="speed"> </div>
<div id="remaining"> </div>
<div id="b_transfered"> </div>
<div class="clear_both"></div>
</div>
<div id="upload_response"></div>
</div>
</form>
</div>
</div>
</div>
upload.php
<?php
function bytesToSize1024($bytes, $precision = 2) {
$unit = array('B','KB','MB');
return @round($bytes / pow(1024, ($i = floor(log($bytes, 1024)))), $precision).' '.$unit[$i];
}//Pega o id do usuário logado
$id_url = $_GET['id'];
// Numero de campos de upload
$numeroCampos = count($_FILES['image_file']['name']);
// Tamanho máximo do arquivo (em bytes)
$tamanhoMaximo = 102410242;
// Extensões aceitas
$extensoes = array(".jpg", "jpeg", ".gif", ".png", ".pdf", ".bmp", ".pdf", ".tiff");
//Local da pasta
$_UP['pasta'] = '../upload/';
$substituir = false;
for ($i = 0; $i < $numeroCampos; $i++) {
// Informações do arquivo enviado
$sFileName = $_FILES['image_file']['name'][$i];
$sSize = $_FILES['image_file']['size'][$i];
$sFileSize = bytesToSize1024($sSize, 1);
$nomeTemporario = $_FILES['image_file']['tmp_name'][$i];
// Verifica se o arquivo foi colocado no campo
if (!empty($sFileName)) {
$erro = false;
// Verifica se o tamanho do arquivo é maior que o permitido
if ($sSize > $tamanhoMaximo) {
$erro = "O arquivo " . $sFileName . " não deve ultrapassar " . $tamanhoMaximo. " bytes";
}
// Verifica se a extensão está entre as aceitas
elseif (!in_array(strrchr($sFileName, "."), $extensoes)) {
$erro = "A extensão do arquivo <b>" . $sFileName . "</b> não é válida";
}
// Verifica se o arquivo existe e se é para substituir
elseif (file_exists($_UP['pasta'] . $sFileName) and !$substituir) {
$erro = "O arquivo <b>" . $sFileName . "</b> já existe";
}
else{
//Pega a extensão do arquivo
$TipoExtensao = pathinfo($sFileName, PATHINFO_EXTENSION);
// O arquivo passou em todas as verificações, hora de tentar movê-lo para a pasta
// Primeiro verifica se deve trocar o nome do arquivo
$unixTime = time();
$timeZone = new \DateTimeZone('America/Sao_Paulo');
$time = new \DateTime();
$time->setTimestamp($unixTime)->setTimezone($timeZone);
$formattedTime = $time->format('d-m-Y_l_h-i-s-a');
$aleatorio = rand();
if($TipoExtensao == 'pdf'){
$nome_final = $id_url .'_'. $formattedTime .'_'. $aleatorio .'.pdf';
}else{
$nome_final = $id_url .'_'. $formattedTime .'_'. $aleatorio .'.jpg';
}
// Depois verifica se é possível mover o arquivo para a pasta escolhida
if (move_uploaded_file($nomeTemporario, $_UP['pasta'] . $nome_final)) {
// Upload efetuado com sucesso, exibe uma mensagem e um link para o arquivo
echo "Upload do arquivo ".$sFileName." foi efetuado com sucesso!";
echo "</br>";
echo<<<EOF
<p>Eu tentei implementar o retorno da página aqui!</p>
<p></br></p>
<p></br></p>
EOF;
} else {
// Não foi possível fazer o upload, provavelmente a pasta está incorreta
echo "Não foi possível enviar o arquivo, tente novamente";
echo "</br>";
}
}
} else {
echo "Selecione algum arquivo de imagem ou PDF para fazero upload.";
}
}
?>Rapaz está difícil entender o que de fato você está tentando fazer....
Se você já enviou os arquivos, porque uma nova função para enviar arquivo?
Sei lá tenta isso aqui:
https://github.com/Spell-Master/sm-web/tree/master/javascript/FileTransfer
Assim você pode está sempre enviando arquivos sem sair da página atual.
A propósito umas observações:
Spoiler
Não tem como disparar o evento onchange em uma tag input do tipo text. (Ter na verdade tem, mas aí já é outra conversa).
Você também pode quebrar o php e renderizar o html apenas fechando a tag do php e reabrindo depois, só toma cuidado com o buffer do cabeçalho:
<?php
$variavel = 'qualquer coisa';
echo ("Estamos dentro da tag <?php e temos a varirável \"{$variavel}\", mas por usarmos a função echo o buffer foi enviado");
?>
<div>Fora da tag <?php e depois de ?></div>
<?php
echo ("Novamente dentro do php");
Veja essa função também:
<?phpfunction sizeName($fileSize) {
$path = ['Bit\'s', 'KB\'s', 'MB\'s', 'GB\'s', 'TB\'s'];
$comb = ($fileSize > 0 ? floor(log($fileSize, 1024)) : 0);
if ($comb < 5) {
return (number_format($fileSize / pow(1024, $comb), 2, '.', ',') . ' ' . $path[$comb]);
} else {
return ('Maior que 1 Peta-byte');
}
}
A mesma função em javascript:
function sizeName(fileSize) {
var $path = ['Bit\'s', 'KB\'s', 'MB\'s', 'GB\'s', 'TB\'s'];
var $comb = (fileSize > 0 ? Math.floor(Math.log(fileSize) / Math.log(1024)) : 0);
if ($comb < 5) {
return (parseFloat((fileSize / Math.pow(1024, $comb)).toFixed(2)) + ' ' + $path[$comb]);
} else {
return ('Maior que 1 Peta-byte');
}
}>
1 hora atrás, Omar~ disse:
Rapaz está difícil entender o que de fato você está tentando fazer....
Se você já enviou os arquivos, porque uma nova função para enviar arquivo?
Na realidade é uma função para pegar o novo nome do arquivo e salvar no Banco de Dados. Eu vou conferir o código que você passou, valeu!
EDIT:
Pra ser exato, eu vou pegar os novos nomes em um array chamado nomeFoto. Eu preciso salvar esses nomes, ID de usuário que enviou, datas de envio e outras informações para depois verificar quem o enviou as imagens e direcionaras urls.
Bom, uploads podem ser feitos de inúmeras formas.
Aqui eu presumo que é um usuário logado que está tentando enviar arquivos, então preparei um exemplo genérico sobre o assunto, espero que seja algo como isso.
Começando pelo html, um formulário de envio simples, e padrão para envio.
Mas a pegada está no javascript controlando o que é selecionado antes de submeter o formulário.
Spoiler
<div id="mostrar-erro" style="display: none"></div>
<form target="_blank" method="POST" action="recebe.php" enctype="multipart/form-data" onsubmit="return (false)">
<input id="enviar" type="file" name="arquivos[]" multiple="" />
<button type="button" onclick="enviarArquivos()">Enviar</button>
</form>
<script>
var tiposAceitos = ['jpg', 'jpeg', 'gif', 'png', 'pdf', 'bmp', 'tiff'],
tamanhoServidor = '<?= ini_get('upload_max_filesize') ?>',
tamanhoAceito = parseInt(tamanhoServidor.replace(/[^\d]+/g, '') + '000000'),
error = document.getElementById('mostrar-erro'),
input = null,
arquivos = 0,
tipo = '';
function enviarArquivos() {
input = document.getElementById('enviar');
arquivos = input.files.length;
try {
if (!arquivos) {
throw 'Não podemos enviar nada se você não selecionar alguma coisa';
}
for (var i = 0; i < arquivos; i++) {
tipo = (input.files[i].name).substr((input.files[i].name).lastIndexOf('.') + 1);
if (!tiposAceitos.includes(tipo)) {
throw 'Ops! você não pode enviar o arquivo' + input.files[i].name;
} else if (input.files[i].size >= tamanhoAceito) {
throw 'Eita! o arquivo ' + input.files[i].name + ' é muito grande';
}
input.parentNode.submit();
}
} catch (e) {
input.value = null;
mostraErro(e);
}
return (false);
}
function mostraErro(mensagem) {
error.innerHTML = mensagem;
error.removeAttribute('style');
setTimeout(function () {
error.innerHTML = null;
error.setAttribute('style', 'display:none');
}, 3000);
}
</script>
Aí no arquivo que vai receber os você faz
Spoiler
<?php
$finfo = new finfo(FILEINFO_MIME);
$ondeSalvar = __DIR__ . DIRECTORY_SEPARATOR . 'upload' . DIRECTORY_SEPARATOR;
$arquivos = (isset($_FILES['arquivos']) ? $_FILES['arquivos'] : false);
$tiposAceitos = ['jpg', 'jpeg', 'gif', 'png', 'pdf', 'bmp', 'tiff'];
$tamanhoServidor = ini_get('upload_max_filesize');
$tamanhoAceito = (int) preg_replace('/[^\d]+/', '000000', $tamanhoServidor);
$extensao = [];
$salvarNoBanco = [];try {
if (!$arquivos) {
throw new Exception('Sem dados da super-global $_FILES');
} else if (!isset($arquivos['name'])) {
throw new Exception('Haha! O malandro submeteu o form por aplicação externa com parâmetros nulos');
}
if (!is_dir($ondeSalvar)) {
mkdir($ondeSalvar, 0777);
}
$totalDeArquivos = count($arquivos['name']);
for ($i = 0; $i < $totalDeArquivos; $i++) {
if ($arquivos['error'][$i]) {
throw new Exception($arquivos['error'][$i]);
} else if (
!isset($arquivos['name'][$i]) ||
!isset($arquivos['tmp_name'][$i]) ||
!isset($arquivos['size'][$i])
) {
throw new Exception('Mas que fdp! Tentando nos enganar com um arquivo falso');
}
$pathInfo = pathinfo($arquivos['name'][$i]);
/*
* Aqui fazemos uma checagem severa!
* Exemplo: Um arquivo pode ser salvo como .php
* Se checar só pelo nome do arquivo "strrchr($sFileName, ".")" ele vai ser jpg
* mas na verdade é um arquivo serve-side que pode ser acessado
* pelo mal intencionado para manipular seu back-end.
*/
$mimeType = $finfo->file($arquivos['tmp_name'][$i]);
$extensao['a'] = substr($mimeType, strrpos($mimeType, '/') + 1);
$extensao['b'] = substr($extensao['a'], 0, strpos($extensao['a'], ';'));
$tipo = mb_strtolower($extensao['b']);
$nomeDoArquivo = mb_strtolower($pathInfo['filename']) . '.' . $tipo;
if (!in_array($tipo, $tiposAceitos)) {
throw new Exception('Original do arquivo');
} else if ($arquivos['size'][$i] >= $tamanhoAceito) {
throw new Exception('Tamanho maior que o aceito');
}
if (move_uploaded_file($arquivos['tmp_name'][$i], $ondeSalvar . $nomeDoArquivo) && is_writable($ondeSalvar)) {
$salvarNoBanco[$i]['usuario'] = 'usuário que enviou';
$salvarNoBanco[$i]['arquivo'] = $nomeDoArquivo;
$salvarNoBanco[$i]['horario'] = date('Y-m-d H:i:s');
} else {
throw new Exception('Não deu para salvar o arquivo');
}
}
// Pronto armazenamos os arquivos, agora salvamos no banco de dados
foreach ($salvarNoBanco as $salvar) {
/*
* Aqui não tem jeito você terá que fazer múltiplas querys
* Exemplo:
* $stmt = $pdo->prepare('
* INSERT INTO users (usuario, arquivo, horario) VALUES (:usuario, :arquivo, :horario)
* ');
* $stmt->execute($salvar);
*/
}
// Depois do loop acima se não der erro em salvar você mostra uma mensagem de sucesso para o usuário} catch (Exception $e) {
echo ("Temos um problema!
<p>Se isso foi disparado é porque alguém está burlando a aplicação!</p>
<p>Pois a validação já foi feita no front-end, e se deu erro aqui é porque ele editou nossa aplicação!</p>
<p>Você pode registrar um log de erro</p>
<p>Detalhes....</p>
<p>Arquivo: {$e->getFile()}</p>
<p>Linha: {$e->getLine()}</p>
<p>Mensagem: {$e->getMessage()}</p>
");
}
Sei lá cara seu código também envia arquivos, então eu acho que a questão mesmo era salvar no banco de dados.
Como desconheço a estrutura de sua tabela e quais dados realmente é para salvar, então a ajuda é mínima. Mas o esquema é esse aí mesmo cabe você adaptar a sua realidade.>
Em 26/11/2021 at 21:15, Omar~ disse:
Bom, uploads podem ser feitos de inúmeras formas.
Aqui eu presumo que é um usuário logado que está tentando enviar arquivos, então preparei um exemplo genérico sobre o assunto, espero que seja algo como isso.
Começando pelo html, um formulário de envio simples, e padrão para envio.
Mas a pegada está no javascript controlando o que é selecionado antes de submeter o formulário.
Mostrar conteúdo oculto
<div id="mostrar-erro" style="display: none"></div>
<form target="_blank" method="POST" action="recebe.php" enctype="multipart/form-data" onsubmit="return (false)">
<input id="enviar" type="file" name="arquivos[]" multiple="" />
<button type="button" onclick="enviarArquivos()">Enviar</button>
</form>
<script>
var tiposAceitos = ['jpg', 'jpeg', 'gif', 'png', 'pdf', 'bmp', 'tiff'],
tamanhoServidor = '<?= ini_get('upload_max_filesize') ?>',
tamanhoAceito = parseInt(tamanhoServidor.replace(/[^\d]+/g, '') + '000000'),
error = document.getElementById('mostrar-erro'),
input = null,
arquivos = 0,
tipo = '';
function enviarArquivos() {
input = document.getElementById('enviar');
arquivos = input.files.length;
try {
if (!arquivos) {
throw 'Não podemos enviar nada se você não selecionar alguma coisa';
}
for (var i = 0; i < arquivos; i++) {
tipo = (input.files[i].name).substr((input.files[i].name).lastIndexOf('.') + 1);
if (!tiposAceitos.includes(tipo)) {
throw 'Ops! você não pode enviar o arquivo' + input.files[i].name;
} else if (input.files[i].size >= tamanhoAceito) {
throw 'Eita! o arquivo ' + input.files[i].name + ' é muito grande';
}
input.parentNode.submit();
}
} catch (e) {
input.value = null;
mostraErro(e);
}
return (false);
}
function mostraErro(mensagem) {
error.innerHTML = mensagem;
error.removeAttribute('style');
setTimeout(function () {
error.innerHTML = null;
error.setAttribute('style', 'display:none');
}, 3000);
}
</script>
Aí no arquivo que vai receber os você faz
Mostrar conteúdo oculto
<?php
$finfo = new finfo(FILEINFO_MIME);
$ondeSalvar = __DIR__ . DIRECTORY_SEPARATOR . 'upload' . DIRECTORY_SEPARATOR;
$arquivos = (isset($_FILES['arquivos']) ? $_FILES['arquivos'] : false);
$tiposAceitos = ['jpg', 'jpeg', 'gif', 'png', 'pdf', 'bmp', 'tiff'];
$tamanhoServidor = ini_get('upload_max_filesize');
$tamanhoAceito = (int) preg_replace('/[^\d]+/', '000000', $tamanhoServidor);
$extensao = [];
$salvarNoBanco = [];try {
if (!$arquivos) {
throw new Exception('Sem dados da super-global $_FILES');
} else if (!isset($arquivos['name'])) {
throw new Exception('Haha! O malandro submeteu o form por aplicação externa com parâmetros nulos');
}
if (!is_dir($ondeSalvar)) {
mkdir($ondeSalvar, 0777);
}
$totalDeArquivos = count($arquivos['name']);
for ($i = 0; $i < $totalDeArquivos; $i++) {
if ($arquivos['error'][$i]) {
throw new Exception($arquivos['error'][$i]);
} else if (
!isset($arquivos['name'][$i]) ||
!isset($arquivos['tmp_name'][$i]) ||
!isset($arquivos['size'][$i])
) {
throw new Exception('Mas que fdp! Tentando nos enganar com um arquivo falso');
}
$pathInfo = pathinfo($arquivos['name'][$i]);
/*
* Aqui fazemos uma checagem severa!
* Exemplo: Um arquivo pode ser salvo como .php
* Se checar só pelo nome do arquivo "strrchr($sFileName, ".")" ele vai ser jpg
* mas na verdade é um arquivo serve-side que pode ser acessado
* pelo mal intencionado para manipular seu back-end.
*/
$mimeType = $finfo->file($arquivos['tmp_name'][$i]);
$extensao['a'] = substr($mimeType, strrpos($mimeType, '/') + 1);
$extensao['b'] = substr($extensao['a'], 0, strpos($extensao['a'], ';'));
$tipo = mb_strtolower($extensao['b']);
$nomeDoArquivo = mb_strtolower($pathInfo['filename']) . '.' . $tipo;
if (!in_array($tipo, $tiposAceitos)) {
throw new Exception('Original do arquivo');
} else if ($arquivos['size'][$i] >= $tamanhoAceito) {
throw new Exception('Tamanho maior que o aceito');
}
if (move_uploaded_file($arquivos['tmp_name'][$i], $ondeSalvar . $nomeDoArquivo) && is_writable($ondeSalvar)) {
$salvarNoBanco[$i]['usuario'] = 'usuário que enviou';
$salvarNoBanco[$i]['arquivo'] = $nomeDoArquivo;
$salvarNoBanco[$i]['horario'] = date('Y-m-d H:i:s');
} else {
throw new Exception('Não deu para salvar o arquivo');
}
}
// Pronto armazenamos os arquivos, agora salvamos no banco de dados
foreach ($salvarNoBanco as $salvar) {
/*
* Aqui não tem jeito você terá que fazer múltiplas querys
* Exemplo:
* $stmt = $pdo->prepare('
* INSERT INTO users (usuario, arquivo, horario) VALUES (:usuario, :arquivo, :horario)
* ');
* $stmt->execute($salvar);
*/
}
// Depois do loop acima se não der erro em salvar você mostra uma mensagem de sucesso para o usuário} catch (Exception $e) {
echo ("Temos um problema!
<p>Se isso foi disparado é porque alguém está burlando a aplicação!</p>
<p>Pois a validação já foi feita no front-end, e se deu erro aqui é porque ele editou nossa aplicação!</p>
<p>Você pode registrar um log de erro</p>
<p>Detalhes....</p>
<p>Arquivo: {$e->getFile()}</p>
<p>Linha: {$e->getLine()}</p>
<p>Mensagem: {$e->getMessage()}</p>
");
}
Sei lá cara seu código também envia arquivos, então eu acho que a questão mesmo era salvar no banco de dados.
Como desconheço a estrutura de sua tabela e quais dados realmente é para salvar, então a ajuda é mínima. Mas o esquema é esse aí mesmo cabe você adaptar a sua realidade.
Eu pensava que era isso, mas os dados das fotos vão ser salvos juntos com outros dados de cadastros. Pra salvar outros dados já funcionam, só preciso implementar o nomeFoto pra salvar os dados das fotos que fiz upload. Aqui vai o código com somente a parte que desenvolvi.
function addItem() {
if (validaAddItem()) {
var objadd = {
//Somente o nomeFoto para exemplificar melhor o código.
"nomeFoto": $(novoUpload(impu)).value
}
debugger
loadingItensAdicionados = true;
$timeout(function () {
arrayItensAdicionados.push(objadd);
limparItem();
loadingItensAdicionados = false;
}, 200);
}
}
function montarSalvar() {
debugger
var params = {
//Parte do código fica aqui no lugar do comentário.
};
arrayItensAdicionados.forEach(element => {
params.itens.push(
{
//Parte do código fica aqui no lugar do comentário.
"sciNomeFoto": element.nomeFoto
}
);
});
return params;
}
O nomeFoto é um array. O outro programador passou instrução pra fazer uma função novoUpload em Javascript. Segue o código.
function novoUpload(impu) {
data = new Date();
debugger
dia = String(data.getDate()).padStart(2, '0');
mes = String(data.getMonth() + 1).padStart(2, '0');
ano = data.getFullYear();
debugger
end = "app/upload/"+impu.HTMLCollection.nomeFoto[0].namedItem(defaultValue);
ext = path.split('.').pop();
dataAtual = dia + '/' + mes + '/' + ano;
debugger
id = $rootScope.usuario.id;
url = arq.end;
userId = arq.id;
upIdAcao = arq.nome;
upTipo = 1;
upData = arq.dataAtual;
//upArray = arq.
return arq;
}
Inspecionei o código e foi necessário implementar o HTMLCollection5, mas nunca usei e não sei se é assim, pois não mostrou o erro no Console da Inspeção do Código. Onde estou errando?
Bom, eu não fiquei parado. Eu acrescentei esse código dentro do EOF.
echo<<<EOF