2010-02-01 98 views
4

我有一個頁面通過$ .ajax請求加載HTML表單。頁面加載後jQuery文件上傳

表單有一個文件上傳選項。我已經嘗試了幾個Ajax上傳插件,它們都要求我實例化一些內部創建click監聽器的ajaxUpload()類型對象。然而,這些監聽器不會觸發,因爲動態加載的表單不是DOM可訪問的。

爲了避開這些事情,我過去用live()來聽。但我不能將這些ajaxUpload實例聲明爲實況事件。那麼我怎麼才能讓這個上傳按鈕起作用呢?

回答

0

我已經通過使用不同的上傳插件 https://github.com/valums/file-uploader

,讓我打電話給一個函數在任何需要的時候創建從DOM元素的上傳者解決了這個。所以我只能在需要上傳時調用該函數。這樣我不需要依靠現場活動。

0

你能動態加載的形式添加到文檔? (然後在將表單添加到文檔之後實例化ajaxUpload對象'')

+0

我正是這樣做,它不工作。這是因爲當我添加表單時,它不附加到DOM。因此,即使我在加載對象後聲明對象,它也不能分析DOM的這一部分。 – Jono 2010-02-02 14:17:58

1

AJAX無法上載文件。 jQuery form plugins使用隱藏的iframe技術來上傳文件。要進行真正的AJAX上傳,您可以使用基於Flash的上傳器。我建議你試試uploadify

+0

AJAX可以在iframe中上傳,這對我而言是很好的。我曾嘗試uploadify和swfupload,他們總是給我一些問題。無論如何,我寧願不處理閃光燈。 – Jono 2010-02-02 14:19:23

+0

+1 Uploadify對於我正在做的項目來說太棒了! ty :) – balexandre 2010-02-03 07:35:19

+0

Flash在技術上並非AJAX(或AJAJ)。除IE外,所有最新的瀏覽器都支持使用XHR進行文件上傳。 Malsup的jQuery表單插件使用XHR在較新的瀏覽器上發送文件,並降級到較老的broswers和IE中的iframe技巧。我還沒有使用其他解決方案,但malsup的插件迄今爲止對我來說非常棒! – wprl 2012-05-07 23:09:50

0

這裏是我已經能夠到目前爲止做到最好:

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

現場()的作品,但它只有點擊後實例化對象。所以我需要再次點擊它才能使上傳觸發器正常工作。

所以我一直試圖刪除多餘的點擊。我希望下面將在函數結束工作,但它並沒有:

$(this).trigger("click"); 
+1

看到我的答案。爲什麼不在點擊處理程序中執行上述操作,而是在表單的ajax請求完成後進行回調? – lawrence 2010-02-03 07:22:24

1

你是什麼意思的形式是不是在DOM訪問,一旦你用Ajax獲取呢?爲什麼不應該這樣?

$.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 2010-02-03 16:42:35

+0

你只是錯了。加載HTML不會自動*將其添加到DOM;這就是爲什麼我明確地*用.html()調用添加它。您也可以使用append()或任何其他相關方法。 live()的目的是讓你可以在獲取之前設置事件處理程序*。 – lawrence 2010-02-03 19:18:00

0

@lawrence謝謝,我加載HTML作爲表單部分後,面臨同樣的問題,congaing上傳元素,我必須點擊兩次。 雖然我嘗試了很多方法來重新加載HTML後點擊處理,但失敗。

在頁面的結尾我讀了這個 $(this).trigger(「click」); 我改變它適合我,並放置在ajax調用的結尾,它的工作原理。 (「#upload」)。trigger(「click」); 華友世界... 感謝每一個機構。