FormData() Formular Formular immer leer

Ich habe versucht, eine Datei mit Ajax hochzuladen, aber die FormData ist immer leer.FormData() Formular Formular immer leer

Dies ist der Code, den ich zu verwenden bin:

<html> 
<head> 
<link rel="stylesheet" href="../website/css/bootstrap.min.css"> 
</head> 
<body> 
    <form id="providerForm"> 
     <input id="fileI" class="form-control" name="fileI" type="file" /> 
     <button id="newProviderButton" type="submit" class="btn btn-success" 
      value="Enviar">Enviar</button> 
    </form> 
</body> 
<script type="text/javascript" 
    src="https://code.jquery.com/jquery-latest.min.js"></script> 
<script 
    src="http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js"></script> 
<script 
    src="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"></script> 
<script> 
    var providerId = ""; 
    function newProvider() { 

     var a = $("#providerForm")[0]; 
     var b = $("#providerForm"); 
     var c = new FormData($(b)[0]); 
     var d = document.getElementById('providerForm'); 
     var dataT = new FormData(d); 
     var params = $('#providerForm').serializeArray(); 
     c.append("file",$($(a).find("#fileI"))[0]); 
     $.each(params, function(i, val) { 
      dataT.append(val.name, val.value); 
      console.log(val.name + ": " + val.value); 
     }); 
     $.ajax({ 
        type : "POST", 
        beforeSend : function(request) { 
         request.setRequestHeader("Content-Type", 
           "multipart/form-data"); 
        }, 
        url : "../services/user/profile/upload/image", 
        data : dataT, 
        cache : false, 
        contentType : false, 
        processData : false, 
        success : function(msg) { 
         if (msg.message == "OK") { 
          mAlert({ 
           container : $("#providerForm"), 
           message : 'Usuario registrado correctamente', 
           type : 'success', 
           okButton : 'OK' 
          }); 
         } 
        }, 
        statusCode : { 
         401 : function() { 
          window.location.replace("../entrance.jsp"); 
         } 
        } 
       }); 

    } 
    $(document).ready(function() { 
     $("#providerForm").on('reset',function(){ 
      $(this).data('formValidation').resetForm(true); 
     }); 
     $('#providerForm').formValidation({ 
       framework: 'bootstrap', 

       icon: { 
        valid: 'glyphicon glyphicon-ok', 
        invalid: 'glyphicon glyphicon-remove', 
        validating: 'glyphicon glyphicon-refresh' 
       }, 
       fields: {} 
      }) 
     .on('success.form.fv', function(e) { 
       // Prevent form submission 
       e.preventDefault(); 

       var $form = $(e.target), 
        fv = $(e.target).data('formValidation'); 

       // Do whatever you want here ... 

       // Then submit the form as usual 
       newProvider(); 
       //fv.defaultSubmit(); 
      }); 
    }); 
</script> 
</html>

Sie hier, um das Ergebnis zu sehen.

Wie Sie sehen, ich versuchte, das Htmlelement througt verschiedene Methoden bekommen und auch das Element einzeln das Ergebnis ID anhängen Formdata = {}

EDIT:

Ich brauche die Formdata Codierung in multipart/form-data Format

Quelle

2016-12-14 Sergio Baquero

Wenn Sie jQuery verwenden (wie markiert), versuchen Sie anstelle von yo form.serialize() Ihr $ .eines jeden Datentapps.

Quelle

2016-12-14 17:13:05 Craig

Nun, ich brauche die FormData in Multipart/Form-Daten-Codierung. –

Guter Punkt, haben Sie versucht: var formData = new FormData(); formData.append ('Datei', $ ('# DateiI'). Dateien [0]); – Craig

Ich sehe Sie verwenden "c.append (" file ", $ ($ (a) .find (" # fileI ")) [0]);" aber ist das extra $() unnötig? – Craig

Der beste Weg zum Hochladen von Dateien nicht mit Ajax ist, aber wenn Sie das tun wollen, können Sie das, gehören Tutorial folgen:

http://blog.teamtreehouse.com/uploading-files-ajax

Der beste Weg zum Hochladen von Dateien ist die traditionelle Methode, ein Formular mit enctype="multipart/form-data" machen die Aktualisierung der Website, ist sehr einfach, aber das gleiche der beste Weg, das zu tun.

Grüße

Quelle

2016-12-14 17:48:23

Danke Radames, was denkst du ist der beste Weg? –

Sergio, der beste Weg zum Hochladen von Dateien ist die traditionelle Methode, ein Formular mit enctype = "multipart/form-data" zu erstellen, das die Website aktualisiert, ist sehr einfach, aber das ist der beste Weg, dies zu tun. –

Ok. Ich habe versucht, die Seite nicht zu aktualisieren, aber ich denke, dass ich muss. Vielen Dank! –

FormData() Formular Formular immer leer

Antwort

Verwandte Themen