2016-12-14 142 views
0

我一直在嘗試上傳帶有Ajax的文件,但FormData總是空的。FormData()表單元素始終爲空

這是我使用的代碼:

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

你可以在這裏看到的結果。

enter image description here

正如你可以看到我試圖獲得HTML元素througt不同的方法,甚至追加元素單獨結果ID FORMDATA = {}

編輯:

我需要FORMDATA編碼multipart/form-data格式

回答

0

如果您使用jQuery(如已標記),請嘗試使用form.serialize()代替yo ur $ .each dataT追加。

+0

那麼我需要在多部分/表格數據編碼FormData。 –

+0

好點,你試過了嗎: var formData = new FormData(); formData.append('file',$('#fileI')。files [0]); – Craig

+0

我看到你使用「c.append(」file「,$($(a).find(」#fileI「))[0]);」但不是額外的$()不必要? – Craig

1

上傳文件的最好方法是不使用Ajax,但如果你想做到這一點,你可以按照屬於教程:

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

上傳文件的最好方法是傳統的方法,使用enctype="multipart/form-data"刷新網站的形式,非常簡單,但同樣是最好的方式來做到這一點。

Regards

+0

感謝Radames,你認爲最好的方法是什麼? –

+0

Sergio,上傳文件的最佳方式是使用enctype =「multipart/form-data」刷新網站的一種傳統方法,它非常簡單但同樣是最好的方式。 –

+0

好的。我試圖不刷新頁面,但我想我將不得不。謝謝! –