ファイルのアップロードを停止しません

Question

私はhereにアクセスできるアプリケーションを持っています。アプリケーションを開く場合は、[追加]ボタンを数回クリックしてください。下の表に新しい行が追加されます。各テーブル行には、AJAXファイルアップローダがあります。

"アップロード"ボタンをクリックすると、ローディングバーが表示されますが、ローディングバーが消えないという問題があります。ユーザーが「アップロード」をクリックすると、ファイルの入力が再表示され、ファイルが正常に読み込まれたかどうかを示すメッセージが表示されます。

なぜローディングバーのローディングが止まらないのですか？これをどのように修正できますか？

以下

は各行の添付ファイルを入力し、アップロードを開始および停止すると仮定されたJavaScript関数のコードである：

<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

あなたupload.phpファイルはsource_formパラメータを渡していませんstopUpload（）関数の場合これはあなたのPHPファイルが戻っているものです。

window.top.window.stopUpload(0); 

それはsource_formの成功のパラメータが、何を持っています。 source_formは未定義されようとしているので、そうstopUploadで次の3行のコードは（）、右の仕事に行くされていません。

$(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'); 

私が一緒に動作するはずの修正を入れている：

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

これは、ブロックの最上部にsourceFormという新しいグローバル変数を作成することから始まります。この変数は、ユーザが、それはstartUpload（）関数に設定されている上、アップロードボタンをクリックしたフォーム格納するために使用されます。

sourceForm = source_form; 

ので、すぐにユーザーがアップロードに当たるとして、我々は、フォームへの参照を持っています彼らはsourceForm変数を通して使用しています。次にstopUpload（）で、新しいsourceForm変数を使用して可視性を更新し、戻りメッセージを設定します。

副題として、jQuery ajax()を実際に使用する必要があります。 iframeを使用してPHPファイルからJavaScriptを実行するのは難しく、扱いにくいようです。 ajax（）メソッドは非常に簡単です。