2

Como fazer upload de imagem usando Jquery?

Essa é uma dúvida que anda me perseguindo por muito tempo, espero que vocês possam me ajudar.

Bom, andei pesquisando e vi que tem um plugin para isso, ajaxForm. Porem não encontro estrutura para usa-lo, na própria página tem uns exemplos mas tive a capacidade de não entender como fazer.

Tem também o FormData que não sei de onde é, vou pesquisar. Se puderem me ajudar com um desses dois, o que for mais viável e fácil. Ficarei muito agradecido.

Agradeço desde já!

(Uma ótima forma de me ajudar seria com a estrutura do que forem de dar de exemplo, assim poderei aprender olhando como se faz).

2 Respostas 2

5

Basicamente

Crie um página com uma tag form e coloque dois elementos input do tipo file e um button do tipo button. Não esqueça de fazer a referencia do JQuery na sua página. Como demonstrado nesse link.

<html>
<head>
    <title>Upload</title>
</head>
<body>
    <form>
        <input type="file" name="fileimagem" id="fileimagem" />
        <button type="button" id="btn">Enviar</button>
    </form>
    <script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#btn").on('click', function(){

                var data = new FormData();
                data.append('fileimagem', $('#fileimagem')[0].files[0]);

                $.ajax({
                    url: 'save.php',
                    data: data,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    success: function(data) 
                    {
                        alert(data);
                    }
                });

            });
        });
    </script>
</body>
</html>

Após a criação da página agora crie o script no PHP bem simples para gravar a imagem em algum diretório dentro da sua applicação Web.

<?php   

    if (!empty($_FILES['fileimagem']))
    {
        echo move_uploaded_file($_FILES['fileimagem']['tmp_name'], 'img/'.$_FILES['fileimagem']['name']);       
    }
    else
    {
        echo 'false';
    }

Boa Leitura:

1 - move_uploaded_file

2 - Sending multipart/formdata with jQuery.ajax

3 - FormData

4 - jQuery Form Plugin

8
  • No data append vc passa 2 parametros. O que seria o primeiro e o segundo? me indica algum documento pra ler ou é coisa simples e vc me fala Commented 25/05/2016 às 22:12
  • O primeiro parâmetro seria o nome para que eu possa recuperar na programação (exemplo $_FILES['fileimagem']) e o segundo é o conteudo do file para enviar para o servidor que no caso é a imagem escolhida !!! Qualquer dúvida estamos ai.
    – user46523
    Commented 25/05/2016 às 23:26
  • @PedroSoares mais sobre o assunto em FormData.append()
    – user46523
    Commented 25/05/2016 às 23:26
  • Espero que ainda possa esta me ajudando. Estou com um problema :( Quando eu coloco: var data = new FormData(); data.append('fileimagem', $('#fileimagem')[0].files[0]); A requisição ajax para de funcionar, se eu remover e passar outro valor em data ele funciona normal. sabe me dizer o que pode ser? Acho que com isso que esta me passando vou finalmente conseguir Commented 25/05/2016 às 23:41
  • Relação <input type="file" name="fileimagem" id="fileimagem" /> com $('#fileimagem') está é a relação com JQuery pegando e acessando aquela tag input do tipo file (que é a imagem) mas, no JQuery você precisa informar $('#fileimagem')[0].files[0] no segundo parâmetro para funcionar. Eu não sei bem como está seu código mas, a relação é essa.
    – user46523
    Commented 25/05/2016 às 23:52
2

Recomendo que use o Plupload. Bastante popular, com boa documentação.

inserir a descrição da imagem aqui

Código fonte:

<div id="uploader">
    <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
</div>
 
<script type="text/javascript">
// Initialize the widget when the DOM is ready
$(function() {
    // Setup html5 version
    $("#uploader").pluploadQueue({
        // General settings
        runtimes : 'html5,flash,silverlight,html4',
        url : "/examples/upload",
         
        chunk_size : '1mb',
        rename : true,
        dragdrop: true,
         
        filters : {
            // Maximum file size
            max_file_size : '10mb',
            // Specify what files to browse for
            mime_types: [
                {title : "Image files", extensions : "jpg,gif,png"},
                {title : "Zip files", extensions : "zip"}
            ]
        },
 
        // Resize images on clientside if we can
        resize: {
            width : 200,
            height : 200,
            quality : 90,
            crop: true // crop to exact dimensions
        },
 
 
        // Flash settings
        flash_swf_url : '/plupload/js/Moxie.swf',
     
        // Silverlight settings
        silverlight_xap_url : '/plupload/js/Moxie.xap'
    });
});
</script>

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 .