HTML的input標籤在 type = "file"
時,即變爲文件上傳控件,瀏覽器會去監聽這個標籤,根據標籤的另外一個 accept
字段的內容去調取各個平臺的相關係統資源,如圖片,視頻,聲音等,iOS也不例外。通過這個標籤,移動端的H5頁面就有直接獲取系統資源的能力。但是有時候我們並不想讓H5拿到原始的文件,或者是希望能夠加工一下。比如:文件的壓縮,文件格式轉換,文件的編輯等。
<form>
<input type="file" accept="image/gif, image/jpeg"/>
</form>
也許大部分情況下我們會直接採用JS交互的方式。這種方式可定義和可控的程度都比較高,弊端也就是需要交互的地方都要跟H5協商好每個頁面去寫交互代碼。
本文通過攔截的方式,筆者不認爲是一種可靠的方案,因爲隨着iOS系統的升級很可能就變了,不利於項目的穩定,給維護帶來麻煩。不過作爲另外一種解決問題的思路,感興趣還是可以看看的。
先以圖片的獲取爲例
1. 尋找切入口
通過Debug View Hierarchy
工具查看視圖樹尋找點擊H5標籤的彈窗
第一層
顯然這個ActionSheet無法決定最終是哪一張圖片,這個切入點不合適,我們再往裏面看。