1

Colegas.

Estou querendo implementar no meu sistema, uma atualização de imagem como ocorre no facebook, onde clicamos sobre a imagem existente e selecionamos do nosso computador a imagem desejada e a imagem é atualizada automaticamente, sem a necessidade de apertar um botão.

Encontrei o código abaixo, do qual consigo clicar em um link para fazer o upload, mas não estou conseguindo terminar. Alguém poderia me ajudar?

HTML

<div class='atualiza'><img src='imagematual.jpg'></div>

<input id="upload" type="file"> 
<a h ref="" id="upload_link">Alterar foto</a>

Separei o h ref, pois na visualização aqui interpretava como html

CSS

 #upload_link{ 
text-decoration:none; 
} 
#upload{ 
display:none 
} 

JQUERY

$(function(){ 
            $("#upload_link").on('click', function(e){ 
            e.preventDefault(); 
            $("#upload:hidden").trigger('click'); 
            // Não sei cmo passar a foto para a página upload.php
             $.ajax({url: "upload.php?foto=", success: function(result){
           // Não sei como faria para que a imagem atualizasse sem refresh          
            $("#atualiza").html(result);
          }});
         }); 
        }); 
2

1 Resposta 1

1

primeiro passo, para se enviar um arquivo via ajax, você precisa desativar o comportamento padrão do jQuery (application/x-www-form-urlencoded) e usar o padrão da Web (multipart/form-data).

$.ajax({
  url: form.action,
  data: data,
  contentType: false, // evitar que o jQuery realize o set do 'content-type' para 'application/x-www-form-urlencoded'.
  processData: false, // evitar que o jQuery tente serialzar o conteudo usando o $.params().
  type: form.method,
  success: function(data){
    console.log(data);
  }
});

agora vamos aos formulario.:

var form = $("#formUpload")[0];
var enviar = $("#Enviar");
enviar.on("click", function (event) {
  var data = new FormData(form);
  $.ajax({
    url: form.action,
    data: data,
    contentType: false,
    processData: false,
    type: form.method,
    success: function(data){
      console.log(data);
    }
  });
  return false;
});
<form id="formUpload">
  <div>
    <label>
      Descrição:
      <input type="text" id="Descricao" name="Descricao" value="" />
    </label>
  </div>
  <div>
    <label>
      Arquivo
      <input type="file" id="Arquivo" name="Arquivo" value="" />
    </label>
  </div>
  <div>
    <input type="submit" id="Enviar" name="Enviar" value="Enviar" />
  </div>
</form>

agora caso não tenha um form e queira fazer o upload assim que o usuario selecionar um arquivo.:

var arquivo = $("#Arquivo");
arquivo.on("change", function (event) {
  if (arquivo[0].files.length == 0)
    return false;
  
  var data = new FormData();
  data.append('Arquivo', arquivo[0].files[0]); 
  $.ajax({
    url: "minha url",
    data: data,
    contentType: false,
    processData: false,
    type: "POST",
    success: function(data){
      console.log(data);
    }
  });
  return false;
});
<input type="file" id="Arquivo" name="Arquivo" value="" />

e por fim, uma informação extra que pode lhe ser util, você pode criar um link para objetos em memoria, então você pode criar um link para a imagem selecionada e já atualizar a sua imagem sem fazer uma requisição AJAX.

Esta tecnica pode ser util para que o usuario tenha uma previa da imagem antes de realizar o upload.

var arquivo = $("#arquivo");
var imagem = $("#imagem");

arquivo.on("change", function () {
  if (arquivo[0].files.length == 0)
    return false;
  
  var file = arquivo[0].files[0];
  var url = URL.createObjectURL(file);
  imagem.attr("src", url);
  imagem.attr("title", file.name);
  console.log(arquivo[0].files[0]);
});
#imagem {
  width: 480px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="file" id="arquivo" name="arquivo" />
<br />
<img id="imagem" src="#" title="" />

4
  • Olá Toby. Na verdade gostaria que fosse automático, sem ter o botão de Enviar. Selecionar a imagem e automaticamente a foto ser trocada
    – user24136
    Commented 24/10/2016 às 13:14
  • @Fox.11 ja estava editando a resposta para incluir este cenario. Commented 24/10/2016 às 13:20
  • Boa resposta Toby, mas se puder dar vantagem as respostas existentes marcando a pergunta como duplicada seria melhor ;) (acredito que seja desta pergunta pt.stackoverflow.com/q/5581/3635)
    – Syzoth
    Commented 24/10/2016 às 13:43
  • Olá Guilherme. Vi o tópico. Não sei se seria a mesma coisa, pois pelo que vi, ele adiciona até 02 fotos. No meu caso seria apenas uma atualização. Desculpe se eu estiver errado.
    – user24136
    Commented 24/10/2016 às 13:52

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