×
Ir ao conteúdo
  • Cadastre-se

Javascript Salvar os dados das fotos junto com outros itens no Banco De Dados


Air-Gear

Posts recomendados

Olá pessoal!

 

O sistema já tem um código que salva todos os campos no Banco Dados, eu simplesmente preciso implementar o upload de fotos. Bom, eu já conseguir fazer upload das fotos com os novos nomes deles em código PHP, mas precisei jogar de volta na página para salvar os dados das fotos junto com outros dados de cadastro. Na parte de jogar de volta eu fiz assim.

//Código do Upload acima
echo<<<EOF
          <p></p>
          <p>Nome: {$sFileName}</p>
          <p>Tamanho: {$sFileSize}</p>
          <input id="impu" type="hidden" ng-model="sp.nomeFoto[{$i}]" name="nomeFoto[{$i}]" disabled value={$nome_final}>
          <p></br></p>                    
EOF;
//Resto do código e fechamento do PHP

Neste código, eu jogo todo o novo nome das fotos dentro deum input invisível. Após jogar de volta na página eu mando salvar junto com outros dados. O novoNome é um array, pois salvo várias fotos. O problema que na inspeção do código, não envia o novo e outros dados das fotos.

 

O código para adicionar os dados são esses.

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;

  }

 

E foi necessário criar uma nova função, novoUpload. 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?

Link para o comentário
Compartilhar em outros sites

@Air-Gear Cara eu realmente não entendi nada desse seu código, porque você tenta acessar uma lista no Angular passando como paramento um index do php? essa lista vai está carregada no seu frontend? esse código html que o php escreve na tela vai ser carregado pelo frontend?

 

3 horas atrás, Air-Gear disse:
ng-model="sp.nomeFoto[{$i}]" name="nomeFoto[{$i}]"

 

Link para o comentário
Compartilhar em outros sites

47 minutos atrás, GabrielSennaMs disse:

@Air-Gear Cara eu realmente não entendi nada desse seu código, porque você tenta acessar uma lista no Angular passando como paramento um index do php? essa lista vai está carregada no seu frontend? esse código html que o php escreve na tela vai ser carregado pelo frontend?

 

 

@GabrielSennaMs Bom, eu tentei fazer o esquema de salvar fotos sem depender de PHP, mas não conseguir. Só para ter uma ideia do caminho, no HTML com Angular tem um campo input para escolher as fotos. Em seguida, clicando no botão vai ativar uma função Javascript que verifica se os arquivos são validos e vai chamar upload.php com ID do usuário. Dentro do PHP, vai analisar os arquivos e fazer o esquema de renomear-los para jogar de volta no HTML.

 

Sim, essa lista vai ser carregada no Front-End. Vai exibir a mensagem que o arquivo foi salvo e vai jogar input invisível com o novo nome década arquivo de foto. E também quero jogar esses novos nomes dentro de uma função Javascript.

Link para o comentário
Compartilhar em outros sites

@Air-Gear Acho que você deve renderizar isso usando o Angular para evitar erro e fazer uma request para fazer um upload antes de enviar os dados para o backend vai necessitar de uma rotina para re mover os arquivos que não foram usados.

Link para o comentário
Compartilhar em outros sites

1 hora atrás, GabrielSennaMs disse:

@Air-Gear Acho que você deve renderizar isso usando o Angular para evitar erro e fazer uma request para fazer um upload antes de enviar os dados para o backend vai necessitar de uma rotina para re mover os arquivos que não foram usados.

Tem algum material que faz upload de foto em Angular ou algum framework em Javascript que você recomenda? 

Link para o comentário
Compartilhar em outros sites

@Air-Gear Até onde eu sei o Angular tem uma lib para isso a: https://www.w3schools.com/angular/angular_http.asp, você também pode usar o axios: https://github.com/axios/axios.

Link para o comentário
Compartilhar em outros sites

20 horas atrás, GabrielSennaMs disse:

@Air-Gear Até onde eu sei o Angular tem uma lib para isso a: https://www.w3schools.com/angular/angular_http.asp, você também pode usar o axios: https://github.com/axios/axios.

Valeu @GabrielSennaMs!

 

Enquanto isso eu trabalhei no novoUpload e finalmente conseguir imprimir o novo nome do arquivo que esta na primeira posição. Agora eu estou trabalhando numa array para imprimir todos os nomes, mas imprime só o primeiro nome. Segue o código.

 

echo<<<EOF
          <p></p>
          <p>Nome: {$sFileName}</p>
          <p>Tamanho: {$sFileSize}</p>
          <input class="arrayFoto" id="impu" type="text" ng-model="sp.nomeFoto[{$i}]" name="nomeFoto[{$i}]" disabled value={$nome_final}>
          <p></br></p>                    
EOF;

 

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();
    dataAtual = dia + '/' + mes + '/' + ano;

    debugger
    var lista = document.getElementsByClassName("arrayFoto");
    
    for (i=0; i < lista.length; i++){
      end = "app/upload/"+document.getElementById("impu").value;
      document.getElementById("demo").innerHTML = end; //Essa linha é usado pra impressão de teste
      //ext = path.split('.').pop();
    }
    

    debugger
    id = $rootScope.usuario.id;

    url = arq.end;
    userId = arq.id;
    upIdAcao = arq.nome;
    upTipo = 1;
    upData = arq.dataAtual;
    //upArray = arq.

    return arq;
}

 

Link para o comentário
Compartilhar em outros sites

@Air-Gear Não sei se o grafico é a sua prioridade no momento, mas esse component pode te ajutar nisso.

 

https://pqina.nl/filepond/

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Ebook grátis: Aprenda a ler resistores e capacitores!

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!