2

Preciso que o upload da imagem seja feito com ajax/jquery, seguindo essa estrutura:

Form:

<form>
<input type="text" name="seu_nome" />
<input type="text" name="sua_senha" />
<input type="file" name="file" />

<button type="submit">Enviar</button>
</form>

Ajax/Jquery:

$("#form_"+screen_label).submit(function(){

    var dados = $( this ).serialize();  

    $.ajax({
    type: "POST",                           
    url: "upload.php",              
    data: dados,
    success: function( data ){      
    //ok
}//end success
    });//end method     
    /* .............................................. */

    return false;

});//end submit


o php:

if (isset($_FILES['file']) && !empty($_FILES['file']['name'])) {

    $file_name = $_FILES['file']['name'];
    $file_type = $_FILES['file']['type'];
    $file_size = $_FILES['file']['size'];
    $file_tmp_name = $_FILES['file']['tmp_name'];
    $error = $_FILES['file']['error'];      

    //echo $file_name;
    //echo $titulo;

            /*
            switch($file_type){
                case 'image/png':  $arq ='.png';break;
                case 'image/jpeg': $arq ='.jpg';break;
                case 'image/gif':  $arq ='.gif';break;
                case 'image/bmp':  $arq ='.bmp';break;
                case 'image/PNG':  $arq ='.PNG';break;
                case 'image/JPEG': $arq ='.JPEG';break;
                case 'image/GIF':  $arq ='.GIF';break;
                case 'image/BMP':  $arq ='.BMP';break;

            }
            */

            $destino = 'imgs/';

       move_uploaded_file($file_tmp_name,$destino.$file_name);


    }//end if isset file

Alguém sabe o que está faltando para que o upload aconteça e a imagem seja salva na pasta?

1
  • Creio que Aqui está a solução para o seu problema.
    – Jorge.M
    6/02/2018 às 19:52

1 Resposta 1

2

A melhor solução é trabalhar com FormData e construir o que é para ser enviado ao seu script PHP no caso eu mudei para uma melhor identificação o name para id, fiz a adição de um a um e depois envie para o servidor, exemplo:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel - Resultados</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
        </script>
    </head>
    <body>
    <form method="post" enctype="multipart/form-data">
        <input type="text" id="seu_nome" />
        <input type="text" id="sua_senha" />
        <input type="file" id="file" />
        <button type="button" id="btEnviar">Enviar</button>
    </form>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#btEnviar').click(function()
            {

                var form_data = new FormData();           

                form_data.append('file', $('#file').prop('files')[0]);                  
                form_data.append('seu_nome', $("#seu_nome").val());
                form_data.append('sua_senha', $("#sua_senha").val());

                $.ajax({
                    url: 'up.php',
                    dataType: 'text', 
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: form_data,  
                    type: 'post',
                    success: function(data){
                        alert(data); 
                    }
                });
            });
        });
    </script>
 </body>
</html>

e no script

<?php

    if ( isset($_FILES['file']) && !empty($_FILES['file']['name']) )
    {
        $file_name = $_FILES['file']['name'];
        $file_type = $_FILES['file']['type'];
        $file_size = $_FILES['file']['size'];
        $file_tmp_name = $_FILES['file']['tmp_name'];       

        $destino = 'imgs/';

        echo move_uploaded_file($file_tmp_name,$destino.$file_name);    
    }

com esses dois arquivos já consegue enviar as imagens e as informações das duas caixas de texto para o servidor e utilizar da maneira que quiser.

Esse exemplo pode ser feito também passando o elementos de uma só vez para FormData, exemplo:

var form_data = new FormData(document.getElementById("form1"));

e colocando na tag <form> o id form1.

4
  • Oi, Esse new form_data() é um objeto nativo ou terei que adicionar alguma classe ou plugin para instancia-lo ?
    – Neo
    6/02/2018 às 21:28
  • E terei que ler o valor de cada input .val()? Não posso captar os dados pelo submit name?
    – Neo
    6/02/2018 às 21:29
  • Oi, a explicação sobre FormData() está no link @Neo
    – novic
    7/02/2018 às 0:20
  • Tem a forma de passar os elementos que é indicado qual o formulário que você precisa resgatar as informações var form_data = new FormData(document.getElementById("form1")); fiz uma edição na resposta...
    – novic
    7/02/2018 às 0:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .