最近為了做多檔案非同步上傳的功能

找到了 Mini AJAX File Upload Form 這個 plugin

結果遇到在 android 2.x 的手機上無法使用的問題

沒想到在解決的過程中,問題一個接一個跑出來,android 瀏覽器的雷實在多的太可怕了

 

1. 首先,一般的 file input 是沒用的,一定要加上 capture="camera" 瀏覽器才會有反應,即 <input type="file" name="upl" capture="camera" />,這是開胃菜,只要補上去就行了。

2. 選了檔案之後,檔案的確有上傳到 server,但進度的數字卻一直卡在 0。調查了一下才發現,瀏覽器居然沒有設定檔案的 size,也就是 $('input[name=upl]')[0].files[0].size 值為 0,所以對進度的運算就完全失效了。我想得到的解決方法就只有判斷 $this[0].files[0].size 大於 0 時用進度表,否則就用一般 ajax loading 的 gif 圖檔。

3. 檔案確實傳上去了,但 ajax loading 的圖卻轉到天荒地老,完全不執行 done 這個 callback function,又試了好久才發現,原來是因為瀏覽器不支援 FormData 物件,無法使用一般的 $.ajax 方法來上傳檔案,必須用 iframe 的方法,而 plugin 不知是沒有實做監聽 iframe 內容還是有 bug,導致 callback 無效。最後乾脆自己實做一個 iframe ajax upload 的 plugin,https://github.com/anties/jquery.suckBrowserAjaxUpload,以 'undefined' === typeof FormData 來決定要套用 fileupload 或是 suckBrowserAjaxUpload。

4. 最後一個小雷也花了超久的時間才找到,就是 server 回傳的 json 格式資料怎麼樣就是不寫進 iframe 的 body 裡頭,搞了好久最後才發現是因為平常 server 的 php 程式在回傳 json 格式時,有加上 application/json 這個 header,但瀏覽器的 iframe 遇到這個 header 時就不把內容 render 到 body 裡,導致 iframe 內容都一片空白,所以必須把這個 header 拿掉。

 

也許對 android 2.x 的瀏覽器而言,這些 bug 都只是冰山一角,但也浪費了我好幾天的時間,真希望它們能早點跟 ie 一起消失。

創作者介紹
yo

YO

yo 發表在 痞客邦 PIXNET 留言(0) 人氣()