양식 제출 전에 업로드 URL 생성

Question

양식이 렌더링 될 때가 아니라 파일 업로드 전에 생성을 지연하여 만료 된 업로드 URL을 해결하려고합니다.

$('#btn-upload').click(function(event){ 
    event.preventDefault(); 

    var uploadUrl = ''; 
    $.get("/generate_upload_url", function(data) { 
    uploadUrl = data; 
    }); 

    $('#my-form').attr('action', uploadUrl); 
}); 

그리고 서버 측에 난과 같이 업로드 URL을 생성하는 핸들러가 있습니다 : 내가 찾은 해결책은 이렇게 같은 양식 제출 또는 버튼 클릭 이벤트에서이 작업을 수행하는 것입니다

class GenerateUploadUrlHandler(BaseHandler): 
    def get(self): 
     upload_url = blobstore.create_upload_url('/upload') 
     self.response.headers['Content-Type'] = 'text/plain' 
     self.response.out.write(upload_url) 

나는 것을 버튼을 클릭하여 새 업로드 URL을 생성하고 거기에서 POST 요청을하면 어떻게 될지 예상됩니다.하지만 폼의 동작은 지연으로 채워지고 POST 요청은 잘못된 URL에 대해 수행됩니다. 내가 비동기 GET 요청을하고있어 내 폼이 동시에 제출되어 있기 때문에이 될 수도 의심하지만 난 여기 비슷한 예를 참조 정확히 모르겠어요 : http://blog.notdot.net/2010/04/Implementing-a-dropbox-service-with-the-Blobstore-API-part-3-Multiple-upload-support

Answer 1

두 가지 시도를 :

1) $('#my-form').attr('action', uploadUrl);을 위의 $.get() 성공 콜백에 넣습니다.

2) 그래도 문제가 해결되지 않으면 $.get()에서 $.ajax()으로 전환하고 async을 false로 설정하십시오.

Answer 2

$.get()을 $.ajax({async:false})으로 변경하여 해결 했으므로 비동기 요청을 통해이를 수행하지 않아야한다고 생각합니다.

Answer 3

아약스 사용시 async를 false로 설정하는 것이 좋습니다. 서버가 응답하지 않으면 페이지를 완전히 죽일 수 있습니다.

단추 클릭 이벤트 대신 양식 전송 이벤트로 이벤트 처리기를 바인딩 할 수 있습니다. 그것에서 양식을 방지해야`, 그리고 AJAX 호출의 성공 이벤트에 폼의 action 속성을 설정 한 후 양식

$('#my-form').submit(function(event){ 
    event.preventDefault(); 

    var uploadUrl = ''; 
    $.get("/generate_upload_url", function(data) { 
    uploadUrl = data; 
    $('#my-form').attr('action', uploadUrl); 
    $('#my-form').trigger("submit"); 
    }); 


});