Errore nel file di invio del modulo con modulo utilizzando AJAX

Sto tentando di inviare il modulo utilizzando AJAX che contiene file CSV. Quindi l'idea è di inviare il modulo usando ajax, elaborarlo in un file diverso generando una tabella e richiamare la tabella elaborata nella pagina.Errore nel file di invio del modulo con modulo utilizzando AJAX

Quello che ho è questa,

<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>

e JavaScript è,

$("#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); 
       } 
      }); 
     });

e nel mese di ottenere questo tipo di errore in 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

Che cosa sto facendo sbagliato qui? Ti prego, aiutami

fonte

2015-03-05 Konz Mama

'this' si riferisce al pulsante e non la forma, come è qui che si stanno recuperando il clic evento. – jeroen

Con me ho accidentalmente fornito al mio modulo lo stesso ID di un altro elemento e la richiesta AJAX stava tentando di utilizzare l'altro elemento che non era un oggetto modulo. –

non passano i file al costruttore, ma l'uso di aggiunta, come:

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

fonte

2015-03-05 08:12:48 Naqeeb

Questo funziona bene. grazie mille @Naqeeb –

'TypeError: 'append' ha chiamato su un oggetto che non implementa l'interfaccia FormData. beh ... – Blauhirn

E come inserisco gli altri dati dal modulo? – Sertage

si passa this al costruttore FormData. In questo contesto, è this clic sul pulsante, identificato nel messaggio di errore come HTMLFormElement.

In base allo documentation il costruttore FormData si aspetta un elemento form. Quindi devi modificare il codice di conseguenza:

var form = $("#uploadXls"); 

$ajax({ 
    ... 
    data: new FormData(form), 
    .... 
});

fonte

2015-03-05 08:14:04 jurgemaister

ha ancora un errore: ReferenceError: formData non è definito http: //infserver/WeltesTankage/dist/js/jquery-1.10.2.min.js linea 4> eval Riga 15 –

@KonzMama Spiacente, un errore di battitura. FormData dovrebbe avere una maiuscola F, naturalmente – jurgemaister

ha ancora un errore, questo è il mio frammento di codice 'var form = $ (" # uploadXls "); $ .ajax ({ tipo: 'POST', i dati : nuove formdata (forma), url: '../../ contenuti/maindiv_content/disegno/divpages/process_xls_file.php', ' –

È possibile utilizzare anche questo approccio.

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

questo codice restituisce un oggetto jQuery ($('form')) e passare un elemento HTML per formdata (get(0)).

poi nella richiesta AJAX: data: new FormData(form),

fonte

2015-10-05 18:55:44 WhiteOne

questo ha bisogno di più upvotes! Funziona perfettamente ed è super facile da capire! Grazie – Chris

sì;) e puoi resettare tutto il campo modulo, aggiungendo questo alla funzione success: '$ ('# FormID') [0] .reset();' questo potrebbe aiutare qualcuno anche :) – WhiteOne

possono essere questa pagina vi aiuta .. :)

<!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>

fonte

2016-11-23 07:33:11

Errore nel file di invio del modulo con modulo utilizzando AJAX

risposta

Problemi correlati