jQuery Lädt eine Datei hoch und sendet dann das Formular normal

Question

Ich hoffe, dass ich diese Frage sinnvoll machen kann.

Ich verwende derzeit jQuery Form Plugin + Validierung, die gut funktioniert.

Aber was ich versuche zu erreichen,

1, hochladen temp-Datei für im nächsten Schritt der Manipulation

2 Sobald Datei hochgeladen wurde, reicht die normalerweise Form, zu dem Thema nächster Schritt (eine neue Datei).

Also ich bin nur ein 100% sicher, wie das zu erreichen, verwende ich derzeit diesen Code.

$("#fileUpload").validate({ 
     submitHandler: function(form) { 

      $(form).ajaxSubmit({ 
       beforeSubmit: function() { 
        $('input').attr("disabled", true); 
        $("#uploadResponse").show('slow'); 
        $('#uploadResponse').append("<img src='images/icons/ajax-loader.gif' />"); 
       }, 
       success: function(responseText, statusText, xhr, form) { 
        $('input[type=submit]').attr("disabled", false); 
        $('input[type=file]').attr("disabled", true); 
       }, 
       error: function (responseText, statusText, xhr, form) { 
        alert("Oops... Looks like there has been a problem."); 
       } 
      }); 
     } 
    }); 

Und für meine Form

<div id="uploadResponse" style="display: none;"> File Uploading, this can take a few minutes... </div> 

<form action='page.ImportContacts2.php' name="mergeCSV" id="fileUpload" method="post" enctype="multipart/form-data" > 
     File: <input id="getCSV" name="getCSV" class="required" type="file"> 

     Delimiter Type: 
     <select id="delimiter" name="delimiter"> 
      <option value="1" selected="selected">Comma</option> 
      <option value="2">Tab</option> 
     </select> 

     Enclosure Type: 
     <select id="enclosure" name="enclosure"> 
      <option value="1" selected="selected">Double Quotes (")</option> 
      <option value="2">Single Quotes (\')</option> 
     </select> 

     <button type="submit" name="SubmitCSV" id="SubmitCSV" value="SubmitCSV" class="csvCol3Button buttonSmall">Upload File</button> 

</form> 

Answer 1

Einfache Antwort: Sie können Dateien nicht durch AJAX laden. Sie müssen das Formular an eine andere Seite senden und dann von dort aus gehen.

Mehr: Technisch können Sie, aber nicht so. Es beinhaltet das Erstellen eines Iframes und das Übermitteln der Dateien. In jedem Fall müssen Sie einen Post zurück haben, Sie können das XMLHttpRequest-Objekt nicht verwenden.

Wenn Sie eine quick google search tun, können Sie Plug-Ins finden, die dies für Sie tun.