web-dev-qa-db-fra.com

Erreur lors de l'envoi d'un fichier de formulaire avec un formulaire à l'aide de AJAX

J'essaie de soumettre le formulaire en utilisant AJAX qui contient le fichier CSV. Donc, l'idée est d'envoyer le formulaire en utilisant ajax, le traiter dans un fichier différent en générant une table et rappeler la table traitée dans la page.

Voici ce que j'ai

<form id="uploadXls" action="" method="post" enctype="multipart/form-data">
      <input id="uploaderFile" type="file" class="file"><br/>
      <button type="button" class="btn btn-orange pull-right" name="btnSubmit" id="btnSubmit"><i class="fa fa-download"></i> SHOW FILE CONTENT</button>
</form>

et le JavaScript est,

$("#btnSubmit").click(function(){
            $.ajax({
                type: 'POST',
                url: '../../content/maindiv_content/drawing/divpages/process_xls_file.php',
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                success: function (response, textStatus, jqXHR) {
                  $("#showFileContentTable").html(data);
                }
            });
        });

et im obtenir ce genre d'erreur dans firebug, 

TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement.
http://infserver/WeltesTankage/dist/js/jquery-1.10.2.min.js line 4 > eval
Line 14

Qu'est-ce que je fais mal ici? Aidez-moi, s'il vous plaît 

javascriptphpajax
15
Konz Mama

Ne transmettez pas les fichiers au constructeur, mais utilisez append, comme:

var formData = new FormData();
formData.append('file', $('input[type=file]')[0].files[0]);
data:  formData
36
Naqeeb

Vous pouvez aussi utiliser cette approche.

var form = $('form').get(0);

ce code retourne un objet jQuery ($('form')) et transmet un élément HTML à FormData (get(0)).

puis en demande ajax: data: new FormData(form),

28
WhiteOne

Vous passez this au constructeur FormData. Dans ce contexte, this est le bouton sur lequel l'utilisateur a cliqué, identifié dans le message d'erreur par HTMLFormElement.

Selon documentation , le constructeur FormData s'attend à un élément form. Donc, vous devez changer votre code en conséquence:

 var form = $("#uploadXls");

 $ajax({
     ...
     data: new FormData(form),
     ....
 });
3
Jørgen R

peut être que cette page vous aide .. :)

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
  </script>
</head>
<body>
  <form method="post" id="fileinfo" enctype="multipart/form-data">
    file <input type="file" name="slug"><br>
     <input type="button" id="uploadBTN" value="Stash the file!"></input>
  </form>
<script type="text/javascript">
    $(document).ready(function()
  {
      $('#uploadBTN').on('click', function()
      { 
        var form = $('form').get(0); 
        console.log(form);
        var fd = new FormData(form);
        fd.append('user_id',4);
        fd.append('user_media_category_id',1);
        //console.log(fd);
        fd.append("user_", "This is some extra data");
        $.ajax({
            url: 'http://localhost/yii2/voila/project/api/web/v1/user-media/new',  
            type: 'POST',
            data: fd,
            success:function(data){
                console.log(data);
            },
            error:function(data){
                console.log(data);
            },
            cache: false,
            contentType: false,
            processData: false
        });
    });
    });
</script>
</body>
</html>
2
Kalpesh Desai

Essayez ce formulaire, il fonctionne pour moi sans problème, Salutations, j'espère pouvoir vous aider.

// normaliser le formulaire 

var formulario = new FormData($('#form_img').get(0));    
    formulario.append('file', $('#customFile')[0].files[0]);

//AND add in Ajax call

data:formulario
0
Julio Vinachi