Ich versuche, eine Datei mit Knoten und Ajax hochzuladen, aber der Ajax-Anruf funktioniert nicht?

Question

Ich bin Fehler auf Hochladen xml und laden csv bin ein Anfänger so können Sie mir bitte eine aufwendige Antwort Ich habe versucht, den Code debuggen beim Klicken auf Upload-Taste, bis Upload-Funktion funktioniert gut auf springen uploadxml() -Funktion Die Daten werden nicht gesendet. Mein HTML-Code

<div class="file-upload"> 
        <form id="file-upload-form"> 
         <div class="upload"> 
          <div class="col-lg-6"> 
           <div class="input-group" id="one"> 

            <input type="text" class="form-control" id="t1" placeholder="Select an xml file.." > 
            <span class="input-group-btn"> 
             <button class="btn btn-default" type="button" id="xmlbtn">Browse</button> 
            </span> 

           </div> 
           <input type="file" accept=".xml" class="hidden" id="xmlPicker" name="xmlFile"/> 
          </div> 
          <div class="col-lg-6"> 
           <div class="input-group" id="two"> 

            <input type="text" class="form-control" id="t2" placeholder="Select an csv file.." > 
            <span class="input-group-btn"> 
             <button class="btn btn-default" type="button" id="csvbtn">Browse</button> 
            </span> 

           </div> 
           <input type="file" class="hidden" accept=".csv" id="csvPicker" name="csvFile"/> 
          </div> 
         </div> 
         <div class="uploadfooter"> 
          <button class="btn btn-default center" type="button" id="upload">Upload</button> 
         </div> 
        </form> 
       </div> 

Mein Js

$(document).ready(function() { 

    $(".ts-sidebar-menu li a").each(function() { 
     if ($(this).next().length > 0) { 
      $(this).addClass("parent"); 
     }; 
    }) 
    var menux = $('.ts-sidebar-menu li a.parent'); 
    $('<div class="more"><i class="fa fa-angle-down"></i></div>').insertBefore(menux); 
    $('.more').click(function() { 
     $(this).parent('li').toggleClass('open'); 
    }); 
    $('.parent').click(function (e) { 
     e.preventDefault(); 
     $(this).parent('li').toggleClass('open'); 
    }); 
    $('.menu-btn').click(function() { 
     $('nav.ts-sidebar').toggleClass('menu-open'); 
    }); 


    $('#zctb').DataTable(); 


    $("#input-43").fileinput({ 
     showPreview: false, 
     allowedFileExtensions: ["zip", "rar", "gz", "tgz"], 
     elErrorContainer: "#errorBlock43" 
      // you can configure `msgErrorClass` and `msgInvalidFileExtension` as well 
    }); 


    $("#xmlbtn").bind("click", function(){ 

     $("#xmlPicker").trigger("click"); 

    }); 


    $("#xmlPicker").bind("change", function(e){ 

     $("#t1").val($("#xmlPicker")[0].files[0].name); 

    }) 


    $("#csvbtn").bind("click", function() { 
     $("#csvPicker").trigger("click"); 
    }); 

    $("#csvPicker").bind("change", function (e) { 
     $("#t2").val($("#csvPicker")[0].files[0].name) 
    }) 





    $("#upload").on("click",function() { 

     var firstfile = $("#t1").val(); 
     var secondfile = $("#t2").val(); 

     if(!firstfile || firstfile != null){ 
      updateXml(); 
     } 

     if(!secondfile || secondfile != null){ 
      updatecsv(); 
     } 

    }) 

    function updateXml(){ 

     var form = $("#file-upload-form").val() 
     var data = new FormData(form); 

     $.ajax({ 
      url: "/update", 
      data: data, 
      type: "put", 
      contentType: false, 
      processData: false, 
      cache: false, 
      success: function (response) { 
       console.log(response); 

      } 
     }) 
    } 



    function updatecsv(){ 
     var form = $("#file-upload-form").val() 
     var data = new FormData(form); 
     $.ajax({ 
      url: "/update", 
      data: data, 
      type: "put", 
      contentType: false, 
      processData: false, 
      cache: false, 
      success: function (response) { 
       console.log(response); 
      } 
     }) 
    } 

}); 

Answer 1

Diese Zeile hier:

var form = $("#file-upload-form").val() 

Ein Formular keinen Wert haben, haben ihre Eingänge ein. FormData erwartet ein Formular, also müssen Sie ihm einen Verweis geben.

var form = $("#file-upload-form"); 
var data = new FormData(form[0]); //expects a DOM form