2011-06-10 209 views
1

我使用jQuery和Andrew Valum's file uploader來處理我的表單中的圖片上傳。所需的行爲是在用戶選擇文件輸入時立即將文件上載到服務器。Javascript在Webkit中工作,但不是FF

html元素:

<input type="file" id="imgUpload" /> 

JS:

var uploader = new qq.FileUploaderBasic({ 
    button: $('#imgUpload')[0], 
    //... 
}); 

以上正常工作與Chrome和Safari瀏覽器,但不與Firefox瀏覽器。 Firefox處理JS的方式有什麼不同嗎?非常感謝。

編輯:雖然我不是一個JavaScript專家,但我認爲Valum的文件上傳器會用自己的文件替換目標輸入元素,然後它將附加一個onchange偵聽器以處理自定義ajax請求。這在Chrome中運行良好。但是,在Firefox中,事件從不觸發ajax請求。文件輸入與正常的html表單一樣,並且需要表單提交。沒有javascript錯誤或任何東西,所有其他腳本在所有瀏覽器中都能正常工作。

更新:仍在工作。結果發現qq.FileUploaderBasic正在初始化正確,並且輸入元素正在成功發送「更改」事件。它只是不會像在Chrome中那樣觸發FF中的事件處理程序。

+0

如果您可以提供有關其無法使用的方式的詳細信息,可能會有所幫助。是否有JavaScript錯誤?奇怪的東西在頁面上? – Pointy 2011-06-10 03:49:54

+0

是否在FF中上傳工作,但需要用戶點擊「上傳」按鈕?( – karim79 2011-06-10 03:50:09

+0

(老實說,誰會投這個問題呢?我的意思是,這並不可怕,但他甚至沒有詳細說明問題。 ) – Pointy 2011-06-10 03:51:44

回答

1

原來,這是一個CSS問題,而不是一個Javascript的。會發生什麼情況是文件上載腳本在目標輸入元素內部創建了一個元素新的<input type="file">元素。這個新的目標輸入元素具有所需的更改事件處理程序。

在Chrome中,單擊原始輸入會激活新的輸入元素,從而觸發所需的行爲。問題是,在Firefox中,單擊原始輸入以某種方式激活了原始輸入元素而不是新輸入元素。這是問題的原因。

所以這是一個跨瀏覽器的CSS問題比一個Javascript的更多。我的下一步是弄清楚如何讓Firefox選擇正確的元素,但是現在希望這可以幫助其他有相同問題的人。

+0

對於任何有同樣問題的人,請參閱http://stackoverflow.com/questions/6309029/nested-file-input-doesnt-work-in-firefox「 – 2011-06-12 22:44:30

相關問題