最近由於在寫一個車貸的webapp項目，其中要求調取手機照相機以及手機相冊來獲取照片，而我之前一直是用cordova等打包工具調取手機硬件、於是也到網上找了下解決方案。其中h5提供的type="file"屬性是一個相當簡便且有效的方法。
<input type="file">除了可以選擇照片，默認情況下是可以選擇文檔的
爲了防止用戶誤選文檔我們可以給 input 標籤添加 accept="image/*" 屬性。
此外，大多數情況我們都需要一次性選擇多張照片，這個H5同樣給出了簡潔的解決方案
我們只需在標籤裏面添加一個 mutiple="mutiple" 屬性，
不過這裏有一個梗，就是當在pc瀏覽器以及ios瀏覽器以及微信端使用時是可以正常選擇多張照片的，但是在絕大多數安卓機上只能一次性選擇一張圖片。
這限於目前安卓系統對h5標籤等效果的優化、目前並沒有什麼好的解決方案。
此外，如果需要調取照相機也只需添加 capture=“camera” 屬性，簡單快捷！
最終我們的 input 元素將是下面的寫法：
<input type="file" accept="image/*" mutiple="mutiple" capture="camera" />
這樣不僅能防止誤選文檔，而且可以一次選擇多張照片，還能調取手機相機。
經過對 input 的這些屬性瞭解後、感覺這些東西還是挺方便的（雖然效果有限）。
因此自己將一些主要代碼封裝成了一個jQuery插件，代碼不多，理解起來也沒啥難度，有更多的需求的童鞋可以自己添加額外的代碼進行優化，github地址：https://github.com/SailorCai/cslPlugin
另外由於微信端和普通瀏覽器存在差別（微信上的input添加capture屬性時是會同時提供相冊和照相機入口，但是瀏覽器上會直接進入拍照）因此在我的這個插件中對微信和瀏覽器做了相應的兼容處理，原理也相當簡單。