Skip to main content
Pergunta fechada como "Duplicada" por Ricardo Pontual, Leandro Angelo, Roberto de Campos, Barbetta, rLinhares
adicionou 253 caracteres ao conteúdo
Fonte Link
user24136
user24136
<div class="faq-profile-btn">
   <label for="imagem" class="btn btn-primary waves-effect waves-light">Nova Foto</label>
   <button type="button" class="btn btn-danger waves-effect waves-light" style="margin-top: -10px" onclick="excluirImagem()">Excluir Foto</button>
</div>
<input type="file" name="FotoPerfil" id="imagem" onchange="previewImagem()">
<div>

     <script> 

    <script>
    function previewImagem(){
    
          var input = document.getElementById("imagem");
          var nome = input.files[0].name;
          var extensao = nome.split('.').pop();
    
          if(extensao != 'jpeg' && extensao != 'jpg' && extensao != 'png'){
             $('#acessar').modal('show');
          }else{
            var imagem = document.querySelector('input[name=FotoPerfil]').files[0];
            var preview = document.querySelector('img');
            var reader = new FileReader(); 

    
     var data = new FormData();
    reader.onloadend = function  data.append()'FotoPerfil', {$('#imagem')[0].files[0]);
         
        preview$.srcajax({
 = reader          url: 'alterar-foto-perfil.result;php',
            }data: data,
            if(imagem){processData: false,
            contentType: false,
   reader.readAsDataURL(imagem);
         type: 'POST',
  }else{
          success: function(data)
          preview.src = "";{
            }    alert(data);
            }
        });

        reader.onloadend = function excluirImagem() {
             var preview.src = documentreader.querySelectorresult;
        }
        if('img'imagem){
            reader.readAsDataURL(imagem);
        }else{
            preview.src = "img/foto_usuario.png";"";
        }
    </script>}

Pensei incluir essa linha:

var foto =}
 $   function excluirImagem("imagem"){
         var preview = document.valquerySelector('img');
$         preview.post("alterar-fotosrc = "img/foto_usuario.php",png";
 {foto: foto}, function(result){

 });
</script>

Mas não sei se seria da forma correta passar valores $_FILES via jqueryAo usar o código acima, ele me retorna valor 0.

<div class="faq-profile-btn">
   <label for="imagem" class="btn btn-primary waves-effect waves-light">Nova Foto</label>
   <button type="button" class="btn btn-danger waves-effect waves-light" style="margin-top: -10px" onclick="excluirImagem()">Excluir Foto</button>
</div>
<input type="file" name="FotoPerfil" id="imagem" onchange="previewImagem()">
<div>

     <script>
        function previewImagem(){
    
          var input = document.getElementById("imagem");
          var nome = input.files[0].name;
          var extensao = nome.split('.').pop();
    
          if(extensao != 'jpeg' && extensao != 'jpg' && extensao != 'png'){
             $('#acessar').modal('show');
          }else{
            var imagem = document.querySelector('input[name=FotoPerfil]').files[0];
            var preview = document.querySelector('img');
            var reader = new FileReader();
    
             reader.onloadend = function () {
                preview.src = reader.result;
            }
            if(imagem){
                reader.readAsDataURL(imagem);
            }else{
                preview.src = "";
            }
        }
      }
        function excluirImagem(){
             var preview = document.querySelector('img');
             preview.src = "img/foto_usuario.png";
        }
    </script>

Pensei incluir essa linha:

var foto = $("imagem").val();
$.post("alterar-foto.php", {foto: foto}, function(result){

});

Mas não sei se seria da forma correta passar valores $_FILES via jquery.

<div class="faq-profile-btn">
   <label for="imagem" class="btn btn-primary waves-effect waves-light">Nova Foto</label>
   <button type="button" class="btn btn-danger waves-effect waves-light" style="margin-top: -10px" onclick="excluirImagem()">Excluir Foto</button>
</div>
<input type="file" name="FotoPerfil" id="imagem" onchange="previewImagem()">
<div>     

    <script>
    function previewImagem(){

      var input = document.getElementById("imagem");
      var nome = input.files[0].name;
      var extensao = nome.split('.').pop();

      if(extensao != 'jpeg' && extensao != 'jpg' && extensao != 'png'){
         $('#acessar').modal('show');
      }else{
        var imagem = document.querySelector('input[name=FotoPerfil]').files[0];
        var preview = document.querySelector('img');
        var reader = new FileReader(); 

        var data = new FormData();
        data.append('FotoPerfil', $('#imagem')[0].files[0]);
         
        $.ajax({
            url: 'alterar-foto-perfil.php',
            data: data,
            processData: false,
            contentType: false,
            type: 'POST',
            success: function(data)
            {
                alert(data);
            }
        });

        reader.onloadend = function () {
            preview.src = reader.result;
        }
        if(imagem){
            reader.readAsDataURL(imagem);
        }else{
            preview.src = "";
        }
    }
  }
    function excluirImagem(){
         var preview = document.querySelector('img');
         preview.src = "img/foto_usuario.png";
    }
</script>

Ao usar o código acima, ele me retorna valor 0.

adicionou 505 caracteres ao conteúdo
Fonte Link
user24136
user24136

Alterar Upload de foto automaticamente com JQuery

Tenho um formulário onde a foto aparece como preview ao ser selecionada para upload:

inserir a descrição da imagem aqui

Gostaria de que, ao selecionar a foto, fizesse o upload automaticamente. Como eu passaria os valores para a página alterar-foto.php?

O código segue abaixo:

<div class="faq-profile-btn">
   <label for="imagem" class="btn btn-primary waves-effect waves-light">Nova Foto</label>
   <button type="button" class="btn btn-danger waves-effect waves-light" style="margin-top: -10px" onclick="excluirImagem()">Excluir Foto</button>
</div>
<input type="file" name="FotoPerfil" id="imagem" onchange="previewImagem()">
<div>

    <script>
        function previewImagem(){
    
          var input = document.getElementById("imagem");
          var nome = input.files[0].name;
          var extensao = nome.split('.').pop();
    
          if(extensao != 'jpeg' && extensao != 'jpg' && extensao != 'png'){
             $('#acessar').modal('show');
          }else{
            var imagem = document.querySelector('input[name=FotoPerfil]').files[0];
            var preview = document.querySelector('img');
            var reader = new FileReader();
    
            reader.onloadend = function () {
                preview.src = reader.result;
            }
            if(imagem){
                reader.readAsDataURL(imagem);
            }else{
                preview.src = "";
            }
        }
      }
        function excluirImagem(){
             var preview = document.querySelector('img');
             preview.src = "img/foto_usuario.png";
        }
    </script>

Pensei incluir essa linha:

var foto = $("imagem").val();
$.post("alterar-foto.php", {foto: foto}, function(result){

});

Mas não sei se seria da forma correta passar valores $_FILES via jquery.

Alterar foto automaticamente

Tenho um formulário onde a foto aparece como preview ao ser selecionada para upload:

inserir a descrição da imagem aqui

Gostaria de que, ao selecionar a foto, fizesse o upload automaticamente. Como eu passaria os valores para a página alterar-foto.php?

O código segue abaixo:

<script>
    function previewImagem(){

      var input = document.getElementById("imagem");
      var nome = input.files[0].name;
      var extensao = nome.split('.').pop();

      if(extensao != 'jpeg' && extensao != 'jpg' && extensao != 'png'){
         $('#acessar').modal('show');
      }else{
        var imagem = document.querySelector('input[name=FotoPerfil]').files[0];
        var preview = document.querySelector('img');
        var reader = new FileReader();

        reader.onloadend = function () {
            preview.src = reader.result;
        }
        if(imagem){
            reader.readAsDataURL(imagem);
        }else{
            preview.src = "";
        }
    }
  }
    function excluirImagem(){
         var preview = document.querySelector('img');
         preview.src = "img/foto_usuario.png";
    }
</script>

Pensei incluir essa linha:

var foto = $("imagem").val();
$.post("alterar-foto.php", {foto: foto}, function(result){

});

Mas não sei se seria da forma correta passar valores $_FILES via jquery.

Upload de foto automaticamente com JQuery

Tenho um formulário onde a foto aparece como preview ao ser selecionada para upload:

inserir a descrição da imagem aqui

Gostaria de que, ao selecionar a foto, fizesse o upload automaticamente. Como eu passaria os valores para a página alterar-foto.php?

O código segue abaixo:

<div class="faq-profile-btn">
   <label for="imagem" class="btn btn-primary waves-effect waves-light">Nova Foto</label>
   <button type="button" class="btn btn-danger waves-effect waves-light" style="margin-top: -10px" onclick="excluirImagem()">Excluir Foto</button>
</div>
<input type="file" name="FotoPerfil" id="imagem" onchange="previewImagem()">
<div>

    <script>
        function previewImagem(){
    
          var input = document.getElementById("imagem");
          var nome = input.files[0].name;
          var extensao = nome.split('.').pop();
    
          if(extensao != 'jpeg' && extensao != 'jpg' && extensao != 'png'){
             $('#acessar').modal('show');
          }else{
            var imagem = document.querySelector('input[name=FotoPerfil]').files[0];
            var preview = document.querySelector('img');
            var reader = new FileReader();
    
            reader.onloadend = function () {
                preview.src = reader.result;
            }
            if(imagem){
                reader.readAsDataURL(imagem);
            }else{
                preview.src = "";
            }
        }
      }
        function excluirImagem(){
             var preview = document.querySelector('img');
             preview.src = "img/foto_usuario.png";
        }
    </script>

Pensei incluir essa linha:

var foto = $("imagem").val();
$.post("alterar-foto.php", {foto: foto}, function(result){

});

Mas não sei se seria da forma correta passar valores $_FILES via jquery.

Fonte Link
user24136
user24136

Alterar foto automaticamente

Tenho um formulário onde a foto aparece como preview ao ser selecionada para upload:

inserir a descrição da imagem aqui

Gostaria de que, ao selecionar a foto, fizesse o upload automaticamente. Como eu passaria os valores para a página alterar-foto.php?

O código segue abaixo:

<script>
    function previewImagem(){

      var input = document.getElementById("imagem");
      var nome = input.files[0].name;
      var extensao = nome.split('.').pop();

      if(extensao != 'jpeg' && extensao != 'jpg' && extensao != 'png'){
         $('#acessar').modal('show');
      }else{
        var imagem = document.querySelector('input[name=FotoPerfil]').files[0];
        var preview = document.querySelector('img');
        var reader = new FileReader();

        reader.onloadend = function () {
            preview.src = reader.result;
        }
        if(imagem){
            reader.readAsDataURL(imagem);
        }else{
            preview.src = "";
        }
    }
  }
    function excluirImagem(){
         var preview = document.querySelector('img');
         preview.src = "img/foto_usuario.png";
    }
</script>

Pensei incluir essa linha:

var foto = $("imagem").val();
$.post("alterar-foto.php", {foto: foto}, function(result){

});

Mas não sei se seria da forma correta passar valores $_FILES via jquery.