2

Tenho um formulário onde através do modal Bootstrap, ele faz o upload automaticamente. Está funcionando corretamente, o problema é que ele não está limpando o campo. Vejam:

<form method="post" id="form-upload" novalidate enctype="multipart/form-data">
    <label for="email" style="font-weight: normal"><strong>Formato permitido:</strong> JPG, JPEG e PNG<br><strong>Tamanho da imagem:</strong> 1170 x 300</label>
     <div class="md-group-add-on">
      <span class="md-add-on-file">
          <button class="btn btn-primary waves-effect waves-light">Foto</button>
      </span>
  <div class="md-input-file">
      <input type="file" id="fotoCapa" name="FotoCapa"/>
      <input type="text" class="md-form-control md-form-file">
      <label class="md-label-file"></label>
  </div>
</div>
    <div id="sucesso"></div>
</form>


<script type="text/javascript">
$(function(){
    $('#fotoCapa').change(function(e) {
      e.preventDefault();
      var formData = new FormData();
      formData.append('FotoCapa', $('#fotoCapa').prop('files')[0]);
      $.ajax({
          url: 'alterar-foto-capa.php',
          data: formData,
          type: 'post',
          success: function(response){

             var status = JSON.parse(response);

              if(status.Status === 0){
                  $('#sucesso').html("<div class='alert alert-success'>A foto foi alterada com sucesso!</div>");
                  $('#fotoCapa').val("");
              }else{
                 $('#sucesso').html("<div class='alert alert-danger'>" + status.Status + "</div>");
             }
              console.log(response);
          },
          processData: false,
          cache: false,
          contentType: false
      });
   });
});
</script>
6
  • Você está mandando limpar o #fotoCapa apenas se status.Status === 0, você verificou se essa condição é válida? 3/07/2018 às 16:07
  • Olá Leandro. Sim, para tanto que quando a condição é válida, ela ativa o alert-success.
    – user24136
    3/07/2018 às 16:25
  • 2
    mas o que você diz que não limpa é de fato o input #fotoCapa ou o segundo input text abaixo dele? 3/07/2018 às 16:27
  • 2
    Quer limpar só esse campo? Porque se forem todos os campos, mais fácil resetar o form assim $('#form-upload')[0].reset(); ou assim $('#form-upload').trigger("reset"), isso claro se a condição status.Status === 0 for verdadeira 3/07/2018 às 16:28
  • Perfeito Ricardo. Funcionou com $('#form-upload')[0].reset(); Obrigado!
    – user24136
    3/07/2018 às 16:47

1 Resposta 1

0

Para limpar apenas o <input="file">, sem precisar resetar todo o forumlário, você pode utilizar o método wrap(), adicionando um novo formulário para esse elemento, resetar só ele e e depois utilizar o unwrap() para remover o formulário adicionado.

$(function(){
    $('#fotoCapa').change(function(e) {
      e.preventDefault();
      var formData = new FormData();
      formData.append('FotoCapa', $('#fotoCapa').prop('files')[0]);
      
      // Código que iria no success do seu post ajax
      $('#fotoCapa').wrap('<form>').closest('form')[0].reset();
      $('#fotoCapa').unwrap();   
      
      console.clear();
      console.log(formData.get('FotoCapa').name)

   });
});
@import 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="form-upload" novalidate enctype="multipart/form-data">
    <label for="email" style="font-weight: normal"><strong>Formato permitido:</strong> JPG, JPEG e PNG<br><strong>Tamanho da imagem:</strong> 1170 x 300</label>
     <div class="md-group-add-on">
      <span class="md-add-on-file">
          <button class="btn btn-primary waves-effect waves-light">Foto</button>
      </span>
  <div class="md-input-file">
      <input type="file" id="fotoCapa" name="FotoCapa"/>
      <input type="text" class="md-form-control md-form-file">
      <label class="md-label-file"></label>
  </div>
</div>
    <div id="sucesso"></div>
</form>

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