传统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

  1. 页面效果

  2. 纯input与type

  3. 指明需要图片

  4. 指明需要多张图片

  5. 指明调用摄像头获取图片

  6. 指明调用摄像头并多张图片

微信 6.7.0

  1. 页面效果

    微信除了调用摄像头之外，点击都显示下面这个，只有点击相册或其他方式后才有区别，下面图片展示都是其他方式的区别。

    注意点击相册在微信与系统上有区别，微信直接打开相册列表，而MIUI系统会默认打开照片列表，或者你手动选择前往相册列表。

  2. 纯input与type

  3. 指明需要图片

    选择效果

  4. 指明需要多张图片

    注意这里直接把摄像头过滤了

    选择效果

  5. 指明调用摄像头获取图片

    同Chrome

  6. 指明调用摄像头并多张图片

    同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打开，其他浏览器不保证具体效果

本文章如果对你有任何帮助，便心满意足。

喜欢的话点个关注，我会定期发布技术相关文章，谢谢。

移动端H5页面上传图片或多张图片的更多相关文章

  1. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  2. 移动端H5页面的设计稿尺寸大小规范-转载自http://www.chinaz.com/design/2015/1103/465670.shtml

    机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为c ...

  3. [转]:移动端H5页面高清多屏适配方案

    原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...

  4. 移动端h5页面的设计稿尺寸

    当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最 ...

  5. 解惑好文：移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  6. 教你如何用 lib-flexible 实现移动端H5页面适配

    前话 好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...

  7. 移动端H5页面惯性滑动监听

    移动端H5页面惯性滑动监听 在移动端,当你快速滑动有滚动条的页面时,当你手指离开屏幕时,滚动条并不会立即停止,而是会随着"惯性"继续滑动一段距离. 在做项目的过程中,需要监听惯性滑 ...

  8. vue移动端h5页面根据屏幕适配的四种方案

    最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...

  9. 移动端H5页面开发，碰到一个字体变大的BUG

    移动端H5页面开发,碰到一个字体变大的BUG webkit内核下,对不定高宽的元素可能会放大其字体.那么,就可以设置一个max-width:或者使用-webkit-text-size-adjust: ...

随机推荐

  1. Node.js+Ajax实现物流小工具

    半年过去了,好像什么也没干,好像什么也干了. 最近在网易云课堂上看到了这个课程,觉得很有意思,就跟着课程做了一遍,课程地址:http://study.163.com/course/courseMain ...

  2. 用烂点子打破沉默的"麦当劳理论"

    "麦当劳"理论是啥? 讨论周末聚餐去哪儿的时候,朋友们往往太过顾及彼此的想法,犹豫着等待其他人做决定. 当谁也不愿说出提议的时候, 我往往会耍一个花招:推荐去麦当劳吃. 宝贵的休息 ...

  3. docker部署nginx，并实现负载均衡。

    安装与使用 安装 nginx官网下载地址 发布版本分为 Linux 和 windows 版本. 也可以下载源码,编译后运行. 从源代码编译 Nginx 把源码解压缩之后,在终端里运行如下命令: $ . ...

  4. Oracle EBS OPM 车间发料事务处理

    --车间发料事物处理 --created by jenrry DECLARE l_iface_rec inv.mtl_transactions_interface%ROWTYPE; l_iface_l ...

  5. QT的初步学习笔记

    一.Qt简介 1.Qt是什么:图形用户界面程序框架  能做界面的还有什么:MFC.GTK+ 2.Qt的由来和发展 3.为什么选择Qt 二.Qt环境与工具 1.工具   a.Qt助手:里面详细说明了Qt ...

  6. Python编写API接口

    要求通过http://192.168.50.74/aptest/calc/?a=aa&c=00&b=bb进行访问,参数a="aa",b="bb" ...

  7. route命令详解与使用实例 ，同时访问内外网

    route命令详解与使用实例     2011-10-18 12:19:41|  分类: 其他 |  标签:route   |字号 订阅   1.   使用背景 需要接入两个网络,一个是部署环境所在内 ...

  8. 树莓派3B+ wifi 5G连接

    新烧的Raspbian 系统,一开始需要设置wifi的一些配置,其中会选择一个国家(set country),一开始选择的是CN(中国),发现只能连接2.4G的网络,5G的网络连接不上,这很奇怪, 因 ...

  9. jquery attr处理checkbox / select 等表单元素时只能使用一次的坑

    先上html结构 <body> <form action=""> <input type="checkbox" id=" ...

  10. Wannafly挑战赛27

    Wannafly挑战赛27 我打的第一场$Wannafly$是第25场,$T2$竟然出了一个几何题?而且还把我好不容易升上绿的$Rating$又降回了蓝名...之后再不敢打$Wannafly$了. 由 ...