傳統PC網頁上傳文件，大家都已經熟悉，這里不做介紹。
本文簡單介紹移動端常用上傳圖片功能。靈活使用輪詢或長連接可實現PC與移動端數據同步，即PC端需要上傳的圖片是移動拍照下來或移動端硬盤儲存的，不需要再傳到PC上然后上傳。比如拍照上傳業務。。。
移動端H5上傳圖片的方式，要點如下：
| 要點 | 解析 |
|---|---|
| input | 即input標簽 |
| type | input標簽的type屬性，需要為file |
| accept | 說明接收文件類型，決定調用的資源種類 |
| capture | 指明調用的目標 |
| multiple | 是否支持多文件 |
實例如下：
<div>純input與type</div>
<input type="file">
<div>指明需要圖片</div>
<input type="file" accept='image/*'>
<div>指明需要多張圖片</div>
<input type="file" multiple accept='image/*'>
<div>指明調用攝像頭獲取圖片</div>
<input type="file" capture='camera' accept='image/*'>
<div>指明調用攝像頭並多張圖片</div>
<!-- multiple 無效 -->
<input type="file" multiple capture='camera' accept='image/*'>效果如下：
Chrome 66.0.3358.158
- 頁面效果
- 純input與type
- 指明需要圖片
- 指明需要多張圖片
- 指明調用攝像頭獲取圖片
- 指明調用攝像頭並多張圖片
微信 6.7.0
-
頁面效果
微信除了調用攝像頭之外，點擊都顯示下面這個，只有點擊相冊或其他方式后才有區別，下面圖片展示都是其他方式的區別。
注意點擊相冊在微信與系統上有區別，微信直接打開相冊列表，而MIUI系統會默認打開照片列表，或者你手動選擇前往相冊列表。
- 純input與type
- 指明需要圖片
選擇效果
-
指明需要多張圖片
注意這里直接把攝像頭過濾了
選擇效果
-
指明調用攝像頭獲取圖片
同Chrome
-
指明調用攝像頭並多張圖片
同Chrome
iOS 11.4.1
微信端與Safari一致，效果與上述微信差不多，功能上沒測試出有什么不同，這里不再貼圖
完整源碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>上傳圖片</title>
</head>
<body>
<div>純input與type</div>
<input type="file">
<div>指明需要圖片</div>
<input type="file" accept='image/*'>
<div>指明需要多張圖片</div>
<input type="file" multiple accept='image/*'>
<div>指明調用攝像頭獲取圖片</div>
<input type="file" capture='camera' accept='image/*'>
<div>指明調用攝像頭並多張圖片</div>
<!-- multiple 無效 -->
<input type="file" multiple capture='camera' accept='image/*'>
<script>
</script>
</body>
</html>點我直接體驗
請使用手機微信或Chrome或Safari打開，其他瀏覽器不保證具體效果
本文章如果對你有任何幫助，便心滿意足。
喜歡的話點個關注，我會定期發布技術相關文章，謝謝。