Jump to content

POWERED BY:

belann

Upload de arquivos com javascript

Recommended Posts

Olá!

 

Estou fazendo o upload de arquivos com fetch dessa forma

fetch(url, {
        method: 'POST',
        headers: {'Content-Type': 'multipart/form-data',},
        body: formData 
    }).catch((error) => (console.log("Problemas com o Upload"), error));

 

estou usando input type=file

e criando uma const formData = new FormData(); 

mas não faz e não dá nenhum erro.

estou fazendo o upload com a url="http://localhost/dashboard/dados".

Share this post


Link to post
Share on other sites

Uma coisa que notei no seu código é a definição explícita do cabeçalho 'Content-Type' como 'multipart/form-data'. Na verdade, ao fazer uploads de arquivos usando FormData, é recomendável não definir esse cabeçalho manualmente. Isso porque o navegador precisa adicionar um boundary ao tipo de conteúdo, o que é algo que ele faz automaticamente quando você omite esse cabeçalho.

 

Aqui vai uma sugestão de como você poderia ajustar o seu código:

const formData = new FormData();
const fileField = document.querySelector('input[type="file"]');
formData.append('file', fileField.files[0]);

fetch('http://localhost/dashboard/dados', {
    method: 'POST',
    body: formData 
})
.then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
})
.then(data => {
    console.log('Success:', data);
})
.catch((error) => {
    console.error('Problemas com o Upload:', error);
});

Com essa abordagem, você deixa que o navegador cuide do cabeçalho Content-Type por você. Isso simplifica um pouco as coisas e pode resolver o problema que você está enfrentando.
 

Além disso, é sempre bom verificar se o servidor está configurado corretamente para aceitar uploads de arquivos e se o endpoint especificado está correto e pronto para lidar com solicitações POST multipart/form-data.

Se mesmo assim você continuar tendo problemas, uma boa dica é verificar os logs do servidor para mais detalhes sobre o que pode estar errado.
 

Espero que essa dica te ajude a resolver o problema! Se tiver mais alguma dúvida ou se algo não estiver claro, sinta-se à vontade para perguntar.

Boa sorte com o seu projeto!

Share this post


Link to post
Share on other sites
9 horas atrás, Williams Duarte disse:

Uma coisa que notei no seu código é a definição explícita do cabeçalho 'Content-Type' como 'multipart/form-data'. Na verdade, ao fazer uploads de arquivos usando FormData, é recomendável não definir esse cabeçalho manualmente. Isso porque o navegador precisa adicionar um boundary ao tipo de conteúdo, o que é algo que ele faz automaticamente quando você omite esse cabeçalho.

 

Aqui vai uma sugestão de como você poderia ajustar o seu código:


const formData = new FormData();
const fileField = document.querySelector('input[type="file"]');
formData.append('file', fileField.files[0]);

fetch('http://localhost/dashboard/dados', {
    method: 'POST',
    body: formData 
})
.then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
})
.then(data => {
    console.log('Success:', data);
})
.catch((error) => {
    console.error('Problemas com o Upload:', error);
});

Com essa abordagem, você deixa que o navegador cuide do cabeçalho Content-Type por você. Isso simplifica um pouco as coisas e pode resolver o problema que você está enfrentando.
 

Além disso, é sempre bom verificar se o servidor está configurado corretamente para aceitar uploads de arquivos e se o endpoint especificado está correto e pronto para lidar com solicitações POST multipart/form-data.

Se mesmo assim você continuar tendo problemas, uma boa dica é verificar os logs do servidor para mais detalhes sobre o que pode estar errado.
 

Espero que essa dica te ajude a resolver o problema! Se tiver mais alguma dúvida ou se algo não estiver claro, sinta-se à vontade para perguntar.

Boa sorte com o seu projeto!

mas se for mais de um arquivo dá para fazer um for e juntar todos do 

input[type="file"]'

Share this post


Link to post
Share on other sites

A lógica é bem parecida com a de um único arquivo, só que você vai incluir mais de um arquivo no formData.

No input no seu HTML adicione o atributo multiple

<input multiple type="file">


Agora, pegue os arquivos do input.

const fileInput = document.querySelector('input[type="file"][multiple]');

 

Adicione cada arquivo ao formData

Array.from(fileInput.files).forEach((file, index) => {
    // Aqui, 'files[]' é o nome do campo que será usado pelo servidor para receber os arquivos.
    // O uso de '[]' indica que é um array de arquivos. O nome exato depende da API do servidor.
    formData.append('files[]', file);
});


O restante é praticamente igual!

Fóruns exigem esforço próprio; não esperem soluções prontas. Pesquise para aproveitar bem.

Share this post


Link to post
Share on other sites
7 horas atrás, Williams Duarte disse:

A lógica é bem parecida com a de um único arquivo, só que você vai incluir mais de um arquivo no formData.

No input no seu HTML adicione o atributo multiple


<input multiple type="file">


Agora, pegue os arquivos do input.


const fileInput = document.querySelector('input[type="file"][multiple]');

 

Adicione cada arquivo ao formData


Array.from(fileInput.files).forEach((file, index) => {
    // Aqui, 'files[]' é o nome do campo que será usado pelo servidor para receber os arquivos.
    // O uso de '[]' indica que é um array de arquivos. O nome exato depende da API do servidor.
    formData.append('files[]', file);
});


O restante é praticamente igual!

Fóruns exigem esforço próprio; não esperem soluções prontas. Pesquise para aproveitar bem.

só está dando o seguinte erro: Problemas com o Upload: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON não consegui achar o problema

Share this post


Link to post
Share on other sites
2 horas atrás, belann disse:

só está dando o seguinte erro: Problemas com o Upload: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON não consegui achar o problema


O erro "Unexpected token ... sugere que o seu código esperava JSON, mas recebeu HTML, provavelmente de uma página de erro (como 404 ou 500). Isso ocorre ao tentar converter a resposta do servidor em JSON quando a URL está errada ou o servidor não responde corretamente. Verifique a URL e as configurações do servidor para garantir que aceitam uploads POST e retornam JSON.
 

fetch('http://localhost/dashboard/dados', {
    method: 'POST',
    body: formData
})
.then(response => {
    if (!response.ok) {
        throw new Error('Houve um problema com a resposta da rede');
    }
    // Verifica se a resposta é JSON antes de tentar converter
    const contentType = response.headers.get('content-type');
    if (contentType && contentType.includes('application/json')) {
        return response.json();
    } else {
        throw new Error('Não é JSON: ' + contentType);
    }
})
.then(data => {
    console.log('Sucesso:', data);
})
.catch(error => {
    console.error('Problemas com o Upload:', error);
});

 

Entenda, quando você faz o upload de arquivos para um servidor usando PHP ou Node.js, a resposta esperada geralmente depende de como você configurou o servidor para lidar com o upload e o que você precisa fazer com os arquivos após recebê-los. Abaixo estão exemplos de respostas que você pode esperar de cada um:

Exemplo de Resposta do PHP:

<?php
// Processamento do upload...
// Supondo que tudo correu bem
$response = [
    'success' => true,
    'message' => 'Upload realizado com sucesso!',
    'fileInfo' => [
        'name' => $_FILES['file']['name'],
        'size' => $_FILES['file']['size'],
        'type' => $_FILES['file']['type'],
    ]
];

header('Content-Type: application/json');
echo json_encode($response);


Exemplo de Resposta do Node.js com Express:

app.post('/upload', upload.single('file'), (req, res) => {
    // Processamento do upload...
    // Supondo que tudo correu bem
    res.json({
        success: true,
        message: 'Upload realizado com sucesso!',
        fileInfo: {
            name: req.file.originalname,
            size: req.file.size,
            type: req.file.mimetype,
        }
    });
});


Obs.: Diferentes frameworks têm a capacidade de ajustar automaticamente seus comportamentos com base nos cabeçalhos HTTP recebidos, o que significa que não existe uma única abordagem padrão aplicável a todos os casos.

Share this post


Link to post
Share on other sites
21 horas atrás, Williams Duarte disse:


O erro "Unexpected token ... sugere que o seu código esperava JSON, mas recebeu HTML, provavelmente de uma página de erro (como 404 ou 500). Isso ocorre ao tentar converter a resposta do servidor em JSON quando a URL está errada ou o servidor não responde corretamente. Verifique a URL e as configurações do servidor para garantir que aceitam uploads POST e retornam JSON.
 


fetch('http://localhost/dashboard/dados', {
    method: 'POST',
    body: formData
})
.then(response => {
    if (!response.ok) {
        throw new Error('Houve um problema com a resposta da rede');
    }
    // Verifica se a resposta é JSON antes de tentar converter
    const contentType = response.headers.get('content-type');
    if (contentType && contentType.includes('application/json')) {
        return response.json();
    } else {
        throw new Error('Não é JSON: ' + contentType);
    }
})
.then(data => {
    console.log('Sucesso:', data);
})
.catch(error => {
    console.error('Problemas com o Upload:', error);
});

 

Entenda, quando você faz o upload de arquivos para um servidor usando PHP ou Node.js, a resposta esperada geralmente depende de como você configurou o servidor para lidar com o upload e o que você precisa fazer com os arquivos após recebê-los. Abaixo estão exemplos de respostas que você pode esperar de cada um:

Exemplo de Resposta do PHP:


<?php
// Processamento do upload...
// Supondo que tudo correu bem
$response = [
    'success' => true,
    'message' => 'Upload realizado com sucesso!',
    'fileInfo' => [
        'name' => $_FILES['file']['name'],
        'size' => $_FILES['file']['size'],
        'type' => $_FILES['file']['type'],
    ]
];

header('Content-Type: application/json');
echo json_encode($response);


Exemplo de Resposta do Node.js com Express:


app.post('/upload', upload.single('file'), (req, res) => {
    // Processamento do upload...
    // Supondo que tudo correu bem
    res.json({
        success: true,
        message: 'Upload realizado com sucesso!',
        fileInfo: {
            name: req.file.originalname,
            size: req.file.size,
            type: req.file.mimetype,
        }
    });
});


Obs.: Diferentes frameworks têm a capacidade de ajustar automaticamente seus comportamentos com base nos cabeçalhos HTTP recebidos, o que significa que não existe uma única abordagem padrão aplicável a todos os casos.

Eu fiz deu essa mensagem: Upload: Error: Não é JSON: text/html;charset=UTF-8
    

Share this post


Link to post
Share on other sites
Em 17/02/2024 at 19:24, belann disse:

Eu fiz deu essa mensagem: Upload: Error: Não é JSON: text/html;charset=UTF-8
    

O problema está no retorno, não no script js, é como eu disse antes:

" resposta esperada geralmente depende de como você configurou o servidor para lidar com o upload"
 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By violin101
      Caros amigos, saudações.

      Estou com uma dúvida, referente cálculo de valores em tempo real.

      Tenho uma rotina, que faz o cálculo, o problema é mostrar o resultado.

      Quero mostrar o RESULTADO assim: 0,00  ou  0.00

      Abaixo posto o código.
      jQuery('input').on('keyup',function(){ //Remover ponto e trocar a virgula por ponto var m = document.getElementById("pgRest").value; while (m.indexOf(".") >= 0) { m = m.replace(".", ""); } m = m.replace(",","."); //Remover ponto e trocar a virgula por ponto var j = document.getElementById("pgDsct").value; while (j.indexOf(".") >= 0) { j = j.replace(".", ""); } j = j.replace(",","."); m = parseFloat(jQuery('#pgRest').val() != '' ? jQuery('#pgRest').val() : 0); j = parseFloat(jQuery('#pgDsct').val() != '' ? jQuery('#pgDsct').val() : 0); //Mostra o Resultado em Tempo Real jQuery('#pgTroco').val(m - j); <<=== aqui estou errando })  
       
      Grato,
       
      Cesar
       
       
    • By violin101
      Caro amigos, saudações.

      Tenho uma tabela escrita em JS que funciona corretamente.
       
      Minha dúvida:
      - como devo fazer para quando a Tabela HTML estiver vazia, exibir o LOGO da Empresa ?

      Abaixo posto o script:
      document.addEventListener( 'keydown', evt => { if (!evt.ctrlKey || evt.key !== 'i' ) return;// Não é Ctrl+A, portanto interrompemos o script evt.preventDefault(); //Chama a Função Calcular Qtde X Valor Venda calcvda(); var idProdutos = document.getElementById("idProdutos").value; var descricao = document.getElementById("descricao").value; var prd_unid = document.getElementById("prd_unid").value; var estoque_atual = document.getElementById("estoque_atual").value; var qtde = document.getElementById("qtde").value; var vlrunit = document.getElementById("vlrunit").value; var vlrtotals = document.getElementById("vlrtotal").value; var vlrtotal = vlrtotals.toLocaleString('pt-br', {minimumFractionDigits: 2}); if(validarConsumo(estoque_atual)){ //Chama a Modal com Alerta. $("#modal_qtdemaior").modal(); } else { if(qtde == "" || vlrunit == "" || vlrtotal == ""){ //Chama a Modal com Alerta. $("#modal_quantidade").modal(); } else { //Monta a Tabela com os Itens html = "<tr style='font-size:13px;'>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='id_prds[]' value='"+idProdutos+"'>"+idProdutos+"</td>"; html += "<td width='47%' height='10'>"+ "<input type='hidden' name='descricao[]' value='"+descricao+"'>"+descricao+ "<input type='hidden' name='esp[]' value='"+prd_unid+"'> - ESP:"+prd_unid+ "<input type='hidden' name='estoq[]' value='"+estoque_atual+"'></td>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='qtde[]' value='"+qtde+"'>"+qtde+"</td>"; html += "<td width='12%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrunit[]' value='"+vlrunit+"'>"+vlrunit+"</td>"; html += "<td width='14%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrtotal[]' value='"+vlrtotal+"'>"+vlrtotal+"</td>"; html += "<td width='12%' height='10' style='text-align:center;'>"+ "<button type='button' class='btn btn-uvas btn-remove-produto' style='margin-right:1%; padding:1px 3px; font-size:12px;' title='Remover Item da Lista'>"+ "<span class='fa fa-minus' style='font-size:12px;'></span></button></td>"; html += "</tr>"; $("#tbventas tbody").append(html); //Função para Somar os Itens do Lançamento somar(); $("#idProdutos").val(null); $("#descricao").val(null); $("#prd_unid").val(null); $("#qtde").val(null); $("#vlrunit").val(null); $("#vlrtotal").val(null); $("#idProdutos").focus(); //Se INCLUIR NOVO produto - Limpa a Forma de Pagamento $("#pgSoma").val(null); $("#pgRest").val(null); $("#pgDsct").val(null); $("#pgTroco").val(null); $("#tbpagar tbody").empty(); }//Fim do IF-qtde }//Fim do Validar Consumo });//Fim da Função btn-agregar  
      Grato,

      Cesar
       
    • By violin101
      Caros amigos, saudações.

      Estou com uma pequena dúvida se é possível ser realizado.

      Preciso passar 2 IDs para o Sistema executar a função, estou utilizando desta forma e gostaria de saber como faço via JS para passar os parâmetro que preciso.

      Observação:
      Dentro da TABELA utilizei 2 Forms, para passar os IDS que preciso, funcionou conforme código abaixo.
      <div class="card-body"> <table id="tab_clie" class="table table-bordered table-hover"> <thead> <tr> <th style="text-align:center; width:10%;">Pedido Nº</th> <th style="text-align:center; width:10%;">Data Pedido</th> <th style="text-align:center; width:32%;">Fornecedor</th> <th style="text-align:center; width:10%;">Status</th> <th style="text-align:center; width:5%;">Ação</th> </tr> </thead> <tbody> <?php foreach ($results as $r) { $dta_ped = date(('d/m/Y'), strtotime($r->dataPedido)); switch ($r->pd_status) { case '1': $status = '&nbsp;&nbsp;Aberto&nbsp;&nbsp;'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#000000'; //Cor: Preta break; case '2': $status = 'Atendido Total'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#086108'; //Cor: Verde break; case '3': $status = 'Atendido Parcial'; $txt = '#000000'; //Cor: Branco $cor = '#FEA118'; //Cor: Amarelo break; default: $status = 'Cancelado'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#D20101'; //Cor: Vermelho break; } echo '<tr>'; echo '<td width="10%" height="10" style="text-align:center;">'.$r->pd_numero.'</td>'; echo '<td width="10%" height="10" style="text-align:center;">'.$dta_ped.'</td>'; echo '<td width="32%" height="10" style="text-align:left;">'.$r->nome.'</td>'; echo '<td width="10%" height="10" style="text-align:left;"><span class="badge" style="color:'.$txt.'; background-color:'.$cor.'; border-color:'.$cor.'">'.$status.'</span></td>'; echo '<td width="5%" style="text-align:center;">'; ?> <div class="row"> <?php if($this->permission->checkPermission($this->session->userdata('permissao'), 'vPedido')){ ?> <form action="<?= base_url() ?>compras/pedidos/visualizar" method="POST" > <input type="hidden" name="idPedido" value="<?php echo $r->idPedidos; ?>"> <input type="hidden" name="nrPedido" value="<?php echo $r->pd_numero; ?>"> <button class="btn btn-warning" title="Visualizar" style="margin-left:50%; padding: 1px 3px;"><i class="fa fa-search icon-white"></i></button> </form> <?php } if($this->permission->checkPermission($this->session->userdata('permissao'), 'ePedido')){ ?> <form action="<?= base_url() ?>compras/pedidos/editar" method="POST" > <input type="hidden" name="idPedido" value="<?php echo $r->idPedidos; ?>"> <input type="hidden" name="nrPedido" value="<?php echo $r->pd_numero; ?>"> <button class="btn btn-primary" title="Editar" style="margin-left:50%; padding: 1px 3px;"><i class="fa fa-edit icon-white"></i></button> </form> <?php } ?> </div> <?php echo '</td>'; echo '</tr>'; } ?> </tbody> </table> </div>
      Grato,

      Cesar.
    • By belann
      Olá!
       
      Estou usando o editor quill em uma página html, sem fazer a instalação com npm, mas usando as api´s via internet com http, no entanto não consigo fazer a tecla enter funcionar para mudança de linha, tentei essa configuração abaixo, mas não funcionou.
       
      modules: {       syntax: true,       toolbar: '#toolbar-container',       keyboard: {         bindings: {           enter: {             key: 13,             handler: function(range, context) {                       quill.formatLine(range.index, range.length, { 'align': '' });             }           }  
       
    • By violin101
      Caros amigos, saudações.
       
      Gostaria de poder tirar uma dúvida com os amigos.
       
      Como faço uma função para Comparar a Data Digitada pelo o Usuário com a Data Atual ?

      Data Digitada:  01/09/2024
       
      Exemplo:
      25/09/2024 é menor que DATA Atual  ====> mensagem: informe uma data válida.
      25/09/2024 é igual DATA Atual ===> o sistema libera os INPUT's.
       
      Como faço uma comparação com a Data Atual, para não Deixar Gravar Data retroativa a data Atual.
       
      Grato,
       
      Cesar
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.