AJAX 및 일반 제출과 함께 파일 업로드

Question

파일 업로드 양식을 만들었습니다. 데이터를 업로드하고 동시에 해당 페이지의 div를 BOOTMETRO 테마가 제공하는로드 애니메이트와 바꾸는 아약스 호출을 원합니다. 파일 업로드와 Ajax가 모두 잘 작동합니다. 그러나 한 번의 클릭으로 두 가지 모두를 원합니다.

제출 버튼을 한 번 누르는 경우 : 1) AJAX가 내 페이지의 부분을 대체해야합니다. 2) 그러면 파일 업로드가 정상적으로 시작됩니다.

내 HTML 양식은 다음과 같습니다

<input name="file" type="file" class="btn btn-info" id="file" /><br/> 

<button type="submit" value="Submit" name="submit" onclick="submit()">Submit File</button> 
</form> 

AJAX 부분

function submit() 
    { 
var xmlhttp; 

    if (window.XMLHttpRequest) 
     {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
     } 
    else 
     {// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 


    xmlhttp.onreadystatechange=function() 
     { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      document.getElementById("fetchLoading").innerHTML=xmlhttp.responseText; 
     } 
     } 

    xmlhttp.open("GET","loading.php" ,true); 
      xmlhttp.send(); 
    xmlhttp.open("GET","upload_process.pgp",true); 
    xmlhttp.send(); 
    } 

도와주세요! 또는 기술 제안. (부팅 메트로를 사용하고 있는데 파일이 업로드되고 페이지가 대기 모드가 될 때까지 아약스에서 내 파일의 div로 로딩을로드하려고합니다.)

Answer 1

먼저 응답을받을 때 AJAX 호출을 보내야합니다 프로그래밍 방식으로 파일 업로드를 실행하십시오.

<button type="submit" value="Submit" name="submit" onclick="return submit()">Submit File</button>

귀하의 submit 기능은 양식 제출을 방지하기 위해 false를 반환해야합니다 : 같은

그래서 당신의 제출 버튼을 것입니다. 그리고 AJAX 응답 내에 양식을 제출하십시오.

document.myform.submit();

는 양식의 이름으로 myform를 교체합니다.