파일 업로드가 중지되지 않습니다

Question

here에 액세스 할 수있는 응용 프로그램이 있습니다. 신청서를 열면 "추가"버튼을 몇 번 클릭하십시오. 그러면 아래 표에 새 행이 추가됩니다. 각 테이블 행에는 AJAX 파일 업 로더가 있습니다.

"업로드"버튼을 클릭하면로드 막대가 표시되지만 문제는로드 막대가 사라지지 않는다는 것입니다. 사용자가 '업로드'를 클릭하면 파일 입력이 다시 표시되고 파일로드가 성공했는지 여부를 나타내는 위의 메시지가있는 버튼이 표시됩니다.

로딩 표시 줄의로드가 중단되지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?

이

<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() 함수의 경우.

window.top.window.stopUpload(0); 

그것은 성공 매개 변수 만 source_form을 위해 아무것도를 가지고 : 이것은 당신의 PHP 파일을 반환하는 것입니다. 내가 함께 수정을 넣었습니다

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

을 그래서 stopUpload 코드의 세 가지 라인() source_form이 정의되지 않은 것입니다 때문에, 잘 작동하지 않을 수 있습니다 이것은 블록 맨 위에 sourceForm이라는 새로운 전역 변수를 만드는 것으로 시작합니다. 이 변수는 사용자가, 그것이 startUpload는() 함수에서 설정에 업로드 버튼을 클릭 형태로 저장하는 데 사용됩니다

sourceForm = source_form; 

그래서 즉시 사용자가 업로드 안타 우리는 형태에 대한 참조를해야합니다 그들은 sourceForm 변수를 통해 사용하고 있습니다. 그런 다음 stopUpload()에서 새 sourceForm 변수를 사용하여 가시성을 업데이트하고 반환 메시지를 설정합니다.

보조 메모로는 jQuery ajax()을 사용하는 것이 좋습니다. iframe을 사용하여 PHP 파일에서 JavaScript를 실행하는 것은 어렵고 성가신 것 같습니다. ajax() 메서드는 훨씬 쉽습니다.