Erste ein Ajax-Fehler „xxx“ ist nicht definiert

Question

Ich habe durch die zahlreichen Fragen Stackoverflow sah, verschiedene Tutorials und youtube vids und bisher keine (das ich gefunden habe) für mich, dieses Problem beheben ...

I habe ein Formular, um eine einzelne Datei zu laden. Es reicht diese Strafe ohne Ajax ein.

<form asp-action="FileIndexView" 
      asp-controller="SuburbsAndPostcodesAdmin" 
      method="post" 
      enctype="multipart/form-data"> 
     <div class="form-horizontal"> 
      <div class="form-group"> 
       <label class="col-md-4 control-label">Select the Suburbs and Postcodes latest CSV File:</label> 
       <input type="file" 
         name="CSVFile" 
         id="txtFileUpload" 
         class="col-md-8 control-label" /> 
      </div> 
      <div class="form-group"> 
       <input type="submit" 
         name="Submit" 
         value="Submit" 
         class="col-md-1 btn btn-primary" 
         disabled="disabled" 
         id="SubmitFile" /> 
      </div> 
     </div> 

Ich habe eine Ajax POST-Methode. Es wird aufgerufen, wenn Sie auf die Senden-Schaltfläche klicken. Alles gut.

Hier ist der Code.

 $('#SubmitFile').click(function (e) { 
     e.preventDefault(); // <------------------ stop default behaviour of button 

     //var fileUpload = input.files[0]; 
     var url = "/SuburbsAndPostcodesAdmin/test"; 
     var connId = $.connection.hub.id; 
     var fd = new FormData(); 
     fd.append('File', input.files[0]); 
     fd.append('connId', connId); 

     $.ajax({ 
      type: "POST", 
      url: url, 
      data: fd, 
      processData: false, 
      contentType: false, 

     }); 

Wenn ich Schritt durch diese es Fehler auf dem:

"fd.append ('Datei', input.files [0]);"

Zeile mit dem folgenden Fehler in der Konsole.

ReferenceError: input is not defined 
    <anonymous> 
    FileIndexView:127 
    n.event.dispatch() 
    jquery.min.js:3 
    n.event.add/r.handle() 
    jquery.min.js:3 
    EventLoop.prototype.enter() 
    ... 

Warum ist dieser Fehler in dieser Zeile?

Wie sollte es lesen, so ist es definiert?

Wie sollte der Dateiname lauten und warum? (Muss dies wieder an das Formular adressiert werden)

Answer 1

Das Problem ist mit input.files[0] hier, weil inputundefined ist.

Statt

fd.append('File', input.files[0]); //here input is not defined 

Versuchen

fd.append('File', $("#txtFileUpload")[0].files[0]); 

Answer 2

Dieses "Formdata" -Objekt scheint verdächtig. jQuery mag einfache Objekte, das heißt

$.ajax({ 
     type: "POST", 
     url: url, 
     data: {input: "A", somethingelse: 2, somethingmore: true}, 
     processData: false, 
     contentType: false, 

    }); 

in Ihrem Browser verwenden, um die Entwickler-Optionen und gehen Sie auf die Registerkarte Netzwerk, genau zu sehen, was auf dem Server in der POST-Operation gedrückt ist wird. Ich wette, es passt nicht, was Ihre Server-Methode erwartet, daher die Ausnahme.

EDIT

erst jetzt aufgefallen, dass Sie versuchen, Datei-Upload zu tun. Es ist gut dokumentiert als ein Schmerz in den Hintern über AJAX. Ich hatte Erfolg mit einem Plug-in namens DropZone. http://www.dropzonejs.com/