2010-02-01 7 views
4

$ .ajax 요청을 통해 HTML 양식을로드하는 페이지가 있습니다.페이지로드 후 jQuery 파일 업로드

양식에 파일 업로드 옵션이 있습니다. 몇 가지 Ajax 업로드 플러그인을 시도했으며 내부적으로 클릭 리스너를 만드는 AjaxUpload() 유형의 객체를 인스턴스화해야합니다. 그러나 동적으로로드 된 양식은 DOM에 액세스 할 수 없으므로 이러한 리스너는 트리거하지 않습니다.

나는 과거에 이런 일들을 극복하기 위해 live()를 사용했습니다. 하지만 이러한 ajaxUpload 인스턴스를 라이브 이벤트로 선언 할 수는 없습니다. 그렇다면이 업로드 버튼을 어떻게 작동시킬 수 있습니까?

답변

0

I 날 임의의 시간에 DOM 요소에서 로더를 생성하는 함수를 호출 할 수있는 다른 업 로더 플러그인 https://github.com/valums/file-uploader

를 사용하여이를 해결 하였다. 그래서 저는 업 로더가 필요할 때만 함수를 호출 할 수 있습니다. 그렇게하면 라이브 이벤트에 의존 할 필요가 없습니다.

1

어딘가에서, livequery 플러그인이 이런 유형의 것을 처리 할 수 ​​있다고 생각합니다. 진리에 대한 나의 탐구에서,이 건너 온 :

Issue with binding in jQuery for copied elements

+0

livequery가 필요한 jquery 1.4에서 작동하지 않습니다. 그래도 고마워. 지금 live()를 실험하고 있습니다. – Jono

0

당신은 문서에 동적으로로드 된 양식을 추가 할 수 있을까요? (ajaxUpload 개체를 인스턴스화 한 후 양식이 문서에 추가됨)

+0

나는 그것을 정확히하고 있으며 효과가 없다. 이는 양식을 추가 할 때 DOM에 연결되지 않기 때문입니다. 따라서로드 된 객체를 선언하더라도 DOM의 해당 섹션을 구문 분석 할 수는 없습니다. – Jono

1

AJAX에서 파일을 업로드 할 수 없습니다. jQuery form plugins 숨겨진 iframe 기술을 사용하여 파일을 업로드하십시오. 실제 AJAX 업로드를하려면 Flash 기반 업 로더를 사용할 수 있습니다. uploadify을 사용해 주셨으면합니다. 여기

+0

AJAX는 내 목적에 맞는 iframe에 업로드 할 수 있습니다. 나는 uploadify 및 swfupload 시도하고 그들은 항상 내게 문제를 제공합니다. 그리고 어쨌든 나는 플래시를 다루지 않을 것입니다. – Jono

+0

+1 Uploadify는 내가하는 프로젝트에 환상적입니다! ty :) – balexandre

+0

플래시는 기술적으로 AJAX (또는 AJAJ)가 아닙니다. IE를 제외한 모든 최신 브라우저는 XHR로 파일 업로드를 지원합니다. Malsup의 jQuery 양식 플러그인은 XHR을 사용하여 최신 브라우저에서 파일을 보내고 오래된 브라우저와 IE에서는 iframe 트릭으로 저하됩니다. 나는 다른 솔루션을 사용하지 않았지만, malsup의 플러그인은 지금까지 저에게 큰 도움이되었습니다! – wprl

0

내가 지금까지 할 수 있었던 최고 :

$('#uploadButton').live('click', function(){     
    new AjaxUpload('uploadButton', { 
     action: 'upload-handler.php', 
     onComplete: function(file, response){ 
     alert(response); 
     }); 
}); 

라이브() 작동하지만, 그것은 단지 클릭 한 후 객체를 인스턴스화합니다. 따라서 업로드 트리거가 작동하려면 다시 클릭해야합니다.

그래서 나는 어떻게 든 여분의 클릭을 제거하려고 노력하고 있습니다. 나는 함수의 끝에서 일하는 것이 다음과 같은 기대했다,하지만하지 있습니다

당신은 아약스와 그것을 가져 번
$(this).trigger("click"); 
+1

내 대답보기. 왜 클릭 처리기에서 위와 같은 작업을 수행하지 않고 양식에 대한 ajax 요청이 완료된 후 콜백에서 수행할까요? – lawrence

1

양식이 DOM에 액세스 할 수없는 무엇을 의미합니까? 왜 그렇게해서는 안되나요?

$.get(url_that_has_form, null, function(resp) { 
    $('#some_container').html(resp); 
    // Now the form is part of the document. 
    // Run your ajax upload stuff here. 
    new AjaxUpload('#id_of_form_you_just_added', options); 
}, 'html'); 
+0

이것은 작동하지 않습니다. HTML을로드해도 jQuery의 DOM에 추가되지 않습니다. 이것은 live()의 목적입니다. – Jono

+0

당신은 이것에 대해 틀 렸습니다. HTML을로드해도 DOM에 자동으로 * 추가되지 않습니다. 그래서 * .html() 호출을 명시 적으로 * 추가하고 있습니다. append() 또는 다른 관련 메서드를 사용할 수도 있습니다. live()의 목적은 이벤트 핸들러 *를 페치하기 전에 설정할 수 있기 때문입니다. – lawrence

0

@lawrence 덕분에 HTML을 양식 파트로로드 한 후 업로드 요소를 협상 한 후 동일한 문제가 발생했습니다. 두 번 클릭해야합니다. 비록 HTML을로드 한 후에 클릭 핸들을 리바 인딩하는 많은 메소드를 시도했지만 실패했습니다.

페이지 끝에 나는 이것을 읽었다 $ (this) .trigger ("click"); 그리고 나에게 맞게 변경하고 아약스 통화가 끝날 때까지 배치하면 작동한다. jQuery ("# upload"). trigger ("click"); 만세 ... 감사합니다.

관련 문제