移動端H5頁面上傳圖片或多張圖片

時間 2019-11-16

標籤移動 h5 頁面上傳圖片欄目無線简体版

原文原文鏈接

傳統PC網頁上傳文件，你們都已經熟悉，這裏不作介紹。html

本文簡單介紹移動端經常使用上傳圖片功能。靈活使用輪詢或長鏈接可實現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/*'>

效果以下：ui

Chrome 66.0.3358.158

頁面效果
純input與type
指明須要圖片
指明須要多張圖片
指明調用攝像頭獲取圖片
指明調用攝像頭並多張圖片

微信 6.7.0

頁面效果spa

微信除了調用攝像頭以外，點擊都顯示下面這個，只有點擊相冊或其餘方式後纔有區別，下面圖片展現都是其餘方式的區別。
注意點擊相冊在微信與系統上有區別，微信直接打開相冊列表，而MIUI系統會默認打開照片列表，或者你手動選擇前往相冊列表。
純input與type
指明須要圖片

選擇效果3d
指明須要多張圖片code

注意這裏直接把攝像頭過濾了

選擇效果htm
指明調用攝像頭獲取圖片blog

同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>