Es hört nicht auf, eine Datei hochzuladen

Question

Ich habe eine Anwendung, auf die Sie zugreifen können here. Wenn Sie die Anwendung öffnen, klicken Sie bitte mehrmals auf die Schaltfläche "Hinzufügen". Dadurch wird eine neue Zeile in eine Tabelle eingefügt. In jeder Tabellenzeile gibt es einen AJAX-Datei-Uploader.

Das Problem, das ich habe, ist, dass, wenn Sie auf die Schaltfläche "Upload" klicken, zeigt es eine Ladeleiste, aber das Problem ist, dass die Ladebalken einfach nicht weggeht. Was passieren sollte, ist, dass der Benutzer auf "Upload" klickt und dann die Datei erneut anzeigt und die Schaltflächen mit einer Nachricht darüber anzeigt, ob die Datei erfolgreich geladen wurde oder nicht?

Warum hört der Ladebalken nie auf zu laden und wie kann ich das beheben?

Unten ist der Code der Eingabedatei in jeder Zeile und die JavaScript-Funktionen angehängt, die es das Hochladen annehmen, um zu starten und zu stoppen:

<script type="text/javascript"> 


function insertQuestion(form) { 

    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'></tr>"); 
    var $image = $("<td class='image'></td>"); 


var $fileImage = $("<form action='upload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='startUpload(this);' >" + 
    "<p class='f1_upload_process' align='center'>Loading...<br/><img src='Images/loader.gif' /><br/></p><p class='f1_upload_form' align='center'><br/><label>" + 
    "File: <input name='fileImage' type='file' class='fileImage' /></label><br/><label><input type='submit' name='submitBtn' class='sbtn' value='Upload' /></label>" + 
    "</p> <iframe class='upload_target' name='upload_target' src='#' style='wclassth:0;height:0;border:0px solclass #fff;'></iframe></form>"); 

    $image.append($fileImage); 

    $tr.append($image); 
    $tbody.append($tr); 

} 

function startUpload(source_form){ 
    $(source_form).find('.f1_upload_process').css('visibility','visible'); 
    $(source_form).find('.f1_upload_form').css('visibility','hidden'); 
     return true; 
} 

function stopUpload(success, source_form){ 
     var result = ''; 
     if (success == 1){ 
     result = '<span class="msg">The file was uploaded successfully!<\/span><br/><br/>'; 
     } 
     else { 
     result = '<span class="emsg">There was an error during file upload!<\/span><br/><br/>'; 
     } 
     $(source_form).find('.f1_upload_process').css('visibility','hidden'); 
     $(source_form).find('.f1_upload_form').html(result + '<label>File: <input name="fileImage" type="file"/><\/label><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /><\/label>'); 
     $(source_form).find('.f1_upload_form').css('visibility','visible');  
     return true; 
} 
</script> 

Answer 1

Ihre upload.php Datei im source_form Parameter übergeben wird nicht für die Funktion stopUpload(). Dies ist, was Ihre PHP-Datei zurückgibt:

window.top.window.stopUpload(0); 

Es hat den Erfolgsparameter aber nichts für source_form. Also diese drei Zeilen Code in stopUpload() werden nicht richtig arbeiten, weil source_form nicht definiert werden wird:

$(source_form).find('.f1_upload_process').css('visibility','hidden'); 
$(source_form).find('.f1_upload_form').html(result + '<label>File: <input name="fileImage" type="file"/><\/label><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /><\/label>'); 
$(source_form).find('.f1_upload_form').css('visibility','visible'); 

ich zusammen einen Fix gesetzt haben sollte, die funktionieren:

<script type="text/javascript"> 
var sourceForm; 

function insertQuestion(form) { 

    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'></tr>"); 
    var $image = $("<td class='image'></td>"); 
    var $fileImage = $("<form action='upload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='startUpload(this);' >" + 
    "<p class='f1_upload_process' align='center'>Loading...<br/><img src='https://helios.hud.ac.uk/u0867587/Mobile_app/Images/loader.gif' /><br/></p><p class='f1_upload_form' align='center'><br/><label>" + 
    "File: <input name='fileImage' type='file' class='fileImage' /></label><br/><label><input type='submit' name='submitBtn' class='sbtn' value='Upload' /></label>" + 
    "</p> <iframe class='upload_target' name='upload_target' src='#' style='wclassth:0;height:0;border:0px solclass #fff;'></iframe></form>"); 

    $image.append($fileImage); 

    $tr.append($image); 
    $tbody.append($tr);  
} 

function startUpload(source_form){ 
    $(source_form).find('.f1_upload_process').css('visibility','visible'); 
    $(source_form).find('.f1_upload_form').css('visibility','hidden'); 
    sourceForm = source_form; 
    return true; 
} 

function stopUpload(success){ 
     var result = ''; 
     if (success == 1){ 
     result = '<span class="msg">The file was uploaded successfully!<\/span><br/><br/>'; 
     } 
     else { 
     result = '<span class="emsg">There was an error during file upload!<\/span><br/><br/>'; 
     } 
     $(sourceForm).find('.f1_upload_process').css('visibility','hidden'); 
     $(sourceForm).find('.f1_upload_form').html(result + '<label>File: <input name="fileImage" type="file"/><\/label><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /><\/label>'); 
     $(sourceForm).find('.f1_upload_form').css('visibility','visible');  
     return true; 
} 
</script> 

Dies beginnt mit der Erstellung einer neuen globalen Variablen namens sourceForm ganz oben im Block. Diese Variable wird zum Speichern verwendet werden, die der Benutzer der Upload-Button darauf geklickt Formular auf, in der startUpload() Funktion gesetzt:

sourceForm = source_form; 

Also, sobald die Benutzer hochladen treffen wir einen Verweis auf das Formular Sie verwenden die Variable sourceForm. Dann verwenden Sie in stopUpload() nur die neue sourceForm-Variable, um die Sichtbarkeit zu aktualisieren und die Rückmeldung zu setzen.

Als eine Randnotiz sollten Sie sich wirklich mit jQuery ajax() befassen. Das Verwenden des iframe, um das JavaScript von Ihrer PHP Akte laufen zu lassen scheint irgendwie schwierig und umständlich. Die ajax() Methode ist so viel einfacher.