Impossible de télécharger un fichier à l'aide d'ajax

Question

J'essaie de télécharger les données du formulaire en utilisant l'ajax mais le problème est que je ne suis pas en mesure de télécharger l'image/fichier.

Code du formulaire

<form class="form-inline" id="form_add"  enctype="multipart/form-data"> 
  <input type="file" id="file-input" name="file-input"  accept="image/*" >

  <input type="text" class="form-control name" id="fname" placeholder="First Name" >                            
  <select class="location" id="location" >
    <option value="">Location</option>
    <?php foreach($location as $loc): ?>
      <option value="<?php echo $loc->city.', '.$loc->state;?>" ><?php echo $loc->city.', '.$loc->state;?></option>
    <?php endforeach; ?>
  </select>
  <button type="submit" class="save_btn"  id="submit" > <img src="save.png" class="Save">   </button>
</form>

script Code

<script>
  $("#submit").click(function()
    {
      event.preventDefault();
      var filename = $('input[type=file]').val();
      var fname = $("#fname").val();
      var location = $("#location").val();
      if(filename != "" || fname != "" || location != "")
            {
              $.ajax({
                type: "POST",
                url: "Data/add_data",
                data: {
                        filename : filename,
                        fname:fname,
                        location:location
                      },
                cache: false,
                success: function(result){
                  console.log(result);
                }});
            }
    });
</script>

Code backend

$ImageFile = $this->input->post('filename');
$config['upload_path'] = './assets/client_img/.';
$config['allowed_types'] = 'gif|jpg|png|jpeg';
$config['max_size'] = 1024 * 8;
$config['encrypt_name'] = TRUE;
$this->load->library('upload', $config);

if (!$this->upload->do_upload('ImageFile')) 
    {
     $error1 = array('error' => $this->upload->display_errors());
     print_r($error1);
    }
else
    {
      $data1 = $this->upload->data();
      echo $data1['file_name'];
    }

Dans le code backend, je récupère la valeur de $ImageFile comme suit C:\fakepath\pic.jpg mais le fichier n'est pas téléchargé et l'erreur dit que

Vous n'avez pas sélectionné de fichier à télécharger

Quelqu'un peut-il me dire comment je peux télécharger le fichier ?

Answer 1

$("#submit").click(function ()
{
    event.preventDefault();
    var filename = $('input[type=file]').val();
    var fname = $("#fname").val();
    var location = $("#location").val();

    if (filename != "" || fname != "" || location != "")
    {
        var formData = new FormData();
        formData.append('filename', $('input[type=file]')[0].files[0]);
        formData.append('fname', fname);
        formData.append('location', location);
        $.ajax({
            type: "POST",
            url: "Data/add_data",
            data: formData,
            contentType: false,
            processData: false,
            cache: false,
            success: function (result) {
                console.log(result);
            }});
    }
});

Answer 2

J'ai remarqué quelques choses

var filename = $('input[type=file]').val() 

N'a pas de ;

Pouvez-vous essayer d'ajouter les champs suivants :

 $.ajax({
            type: "POST",
            url: "Data/add_data",
            data: {
                    filename : filename,
                    fname:fname,
                    location:location
                  },

            contentType: false,
            processData: false,
            cache: false,
            success: function(result){
              console.log(result);
            }});
        }

Parce que cela a probablement quelque chose à voir avec le ContentType. Cela pourrait aussi être le $this->upload->do_upload il se peut que vous n'enregistriez pas le fichier correctement. Mais vous n'avez pas fourni le code pour cela.

Answer 3

Essayez le code ci-dessous et faites quelques changements dans le code ajax. Ajoutez les paramètres ci-dessous dans votre code.

processData: false, contentType: false,

Et ajoutez var formData = new FormData($("#form_add")[0]); avant que l'ajax ne commence.

Ou vérifiez le code ci-dessous et apportez des modifications en fonction de votre code.

$("#submit").click(function(){
    event.preventDefault();
    var filename = $('input[type=file]').val();
    var fname = $("#fname").val();
    var location = $("#location").val();
    var formData = new FormData($("#addad")[0]);
    if(filename != "" || fname != "" || location != ""){
        $.ajax({
            type: "POST",
            url: "Data/add_data",
            data:formData,
            cache: false,
            processData: false,
            contentType: false,
            success: function(result){
                  console.log(result);
            }
        });
    }
});

Answer 4

Bonjour, vous devez sérialiser le formulaire

<script>
  $("#submit").click(function()
    {
      event.preventDefault();

              $.ajax({
                type: "POST",
                url: "Data/add_data",
                data: $('#form_add').serialize(),
                cache: false,
                success: function(result){
                  console.log(result);
                }});
            }
    });
</script>

& dans le contrôle php comme

$ImageFile = $this->input->post('filename');
$config['upload_path'] = './assets/client_img/.';
$config['allowed_types'] = 'gif|jpg|png|jpeg';
$config['max_size'] = 1024 * 8;
$config['encrypt_name'] = TRUE;
$this->load->library('upload', $config);

if (!$this->upload->do_upload('ImageFile')) 
    {
     $error1 = array('error' => $this->upload->display_errors());
     print_r($error1);
    }
else
    {
      $data1 = $this->upload->data();
      echo $data1['file_name'];
    }