1. 程式人生 > >input type=“file” 在移動端H5頁面實現呼叫本地相簿、拍照、錄音

input type=“file” 在移動端H5頁面實現呼叫本地相簿、拍照、錄音

<input type="file" accept="image/*" mutiple="mutiple" capture="camera" />

三個屬性:

accept - 規定可提交的檔案型別。

capture - 系統所捕獲的預設裝置。camera(照相機),camcorder(攝像機),microphone(錄音)

mutiple - 支援多選。當支援多選時,multiple優先順序高於capture。

幾種寫法:

1.<input type="file" accept="image/*" mutiple="mutiple" capture="camera" /> <!-- ios 和 安卓都可以呼叫攝像頭 -->

2.<input type="file" name="upload" accept="image/png,image/jpeg,image/gif" capture="camera"> <!-- 在安卓無法呼叫攝像頭 -->

3.<input type="file" accept=".gif,.jpg,.png,.jpeg,.bmp" name="file" /> <!-- 在安卓微信會出現 "No apps can perform this action" 在uc瀏覽器正常。 ios能正常使用。pc端可以使用 -->

4.<input type="file" accept="image/*" capture="camera">  <!-- 呼叫相機 -->

5.<input type="file" accept="video/*" capture="camcorder"> <!-- 呼叫攝像機 -->

6.<input type="file" accept="audio/*" capture="microphone"> <!-- 呼叫錄音機 -->

7.<!-- 不加上capture,則只會顯示相應的,例如下三種依次是:拍照或相簿,錄影或相簿,錄影或拍照或相簿, -->

<input type="file" accept="image/*" >

<input type="file" accept="video/*" >

<input type="file" accept="audio/*" >