Field file with Jquery

Navigation
0

I'm creating an upload via a modal like this: 

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header btn-primary">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">ALTERAR FOTO</h4>
      </div>
      <div class="modal-body">
          <form method="post" id="form-upload" novalidate enctype="multipart/form-data">
               <label for="email">Tamanho da imagem: 1170 x 300</label>
               <div class="md-group-add-on">
                <span class="md-add-on-file">
                    <button class="btn btn-success waves-effect waves-light">Foto</button>
                </span>
            <div class="md-input-file">
                <input type="file" id="submit" name="FotoCapa" class=""/>
                <input type="text" class="md-form-control md-form-file">
                <label class="md-label-file"></label>
            </div>
        </div>
              <div id="success"></div>
          </form>
      </div>
      <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Alterar</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>

With Jquery, I'm doing it this way: 

<script type="text/javascript">
 $(function(){
    $('#submit').click(function(e) {
      e.preventDefault();
      var formData = new FormData();
      formData.append('image', $('#fotoCapa').prop('files')[0]);
      $.ajax({
          url: 'alterar-foto-capa.php',
          data: formData,
          type: 'post',
          success: function(response){
             console.log(response);
              if(response){    
                 $('#success').html("<div class='alert alert-success'>A foto foi alterada com sucesso!</div>");
                  $('#fotoCapa').val('');
              }else{
                $('#success').html("<div class='alert alert-danger'>" + response + "</div>");
             }
          },
          processData: false,
          cache: false,
          contentType: false
      });
   });        
});          
</script>

The problem is that when I try to get the value with PHP: 

$foto = $_FILES["FotoCapa"]['name'];
echo json_encode($foto);

The following error appears in the console: 

(index):596 Uncaught TypeError: Cannot read property '0' of undefined
    at HTMLButtonElement.<anonymous> ((index):596)
    at HTMLButtonElement.dispatch (jquery-3.1.1.min.js:3)
    at HTMLButtonElement.q.handle (jquery-3.1.1.min.js:3)

When I change this line: 

formData.append('image', $('#fotoCapa').prop('files'));

The console returns null.

    
asked by anonymous 05.02.2018 / 16:31

1 answer

1

The error is at the time you invoke the function, if you call it in the click event, the file does not yet exist, so much that the browser file selection window does not even open, you have to call in the change event, when the window has already been opened and the file has been selected by the user.

Your code with changes: 

$(function(){
    $('#submit').change(function(e) {
      e.preventDefault();
      alert($('#submit').prop('files')[0].name)
      var formData = new FormData();
      formData.append('image', $('#submit').prop('files')[0]);
      $.ajax({
          url: 'alterar-foto-capa.php',
          data: formData,
          type: 'post',
          success: function(response){
             console.log(response);
              if(response){    
                 $('#success').html("<div class='alert alert-success'>A foto foi alterada com sucesso!</div>");
                  $('#fotoCapa').val('');
              }else{
                $('#success').html("<div class='alert alert-danger'>" + response + "</div>");
             }
          },
          processData: false,
          cache: false,
          contentType: false
      });
   });        
});          
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header btn-primary">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">ALTERAR FOTO</h4>
      </div>
      <div class="modal-body">
          <form method="post" id="form-upload" novalidate enctype="multipart/form-data">
               <label for="email">Tamanho da imagem: 1170 x 300</label>
               <div class="md-group-add-on">
                <span class="md-add-on-file">
                    <button class="btn btn-success waves-effect waves-light">Foto</button>
                </span>
            <div class="md-input-file">
                <input type="file" id="submit" name="FotoCapa" class=""/>
                <input type="text" class="md-form-control md-form-file">
                <label class="md-label-file"></label>
            </div>
        </div>
              <div id="success"></div>
          </form>
      </div>
      <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Alterar</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>
When you are going to redeem via PHP, you will have to use the same name you used in formData.append()     
05.02.2018 / 18:19
Show and hide according to another event Problem with form submission