传统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. Prometheus Node_exporter 之 Network Netstat

    Network Netstat /proc/net/netstat 1. Netstat IP In / Out type: GraphUnit: shortLabel: Datagrams out ...

  2. c#考勤统计

    现在项目需求,需要从多张表中获取数据,组装到一个实体对象中,并通过计算统计出每个员工的考勤记录.(全凭自己思考做的,不足的地方希望各位大神指正!毕竟自己能力有限,思考不全) 考勤统计列表: 明细列表: ...

  3. .NET中低版本程序调用高版本DLL

    在.NET项目开发中,有时需要对旧的程序进行二次开发,但是有些DLL是高版本的,如果对旧程序升级高版本,则需要改动的地方比较多,在项目比较急,开发时间短的情况下,可以通过下面方法让低版本程序调用高版本 ...

  4. 如何使用 Packer 在 Azure 中创建 Windows 虚拟机映像

    Azure 中的每个虚拟机 (VM) 都是基于定义 Windows 分发和操作系统版本的映像创建的. 映像可以包括预安装的应用程序和配置. Azure 应用商店为最常见的操作系统和应用程序环境提供了许 ...

  5. CSS| table property

  6. 转：sql语句优化

    性能不理想的系统中除了一部分是因为应用程序的负载确实超过了服务器的实际处理能力外,更多的是因为系统存在大量的SQL语句需要优化. 为了获得稳定的执行性能,SQL语句越简单越好.对复杂的SQL语句,要设 ...

  7. 通过ajax GET方式查询数据，Django序列化objects

    点击“查找2”按钮,通过ajax GET方式进行查询数据,这样页面不需要整体刷新,之后清空tbody数据,将查询结果重新附加到tbody 前端html: <div class="box ...

  8. 汇编语言debug命令与指令机器码

    一.debug命令 二.标志信息 -r用这个指令,得到的信息右下角: NV UP EI PL NZ NA PO NC 这些符号代表的就是标志寄存器里常用标志位的值.这个是符号值对应表: 溢出标志OF( ...

  9. 【转】Spring学习---Spring IoC容器的核心原理

    [原文] Spring的两个核心概念:IoC和AOP的雏形,Spring的历史变迁和如今的生态帝国. IoC和DI的基本概念 IoC(控制反转,英文含义:Inverse of Control)是Spr ...

  10. npm安装vue

    目录 npm安装vue Vue.js 是什么 直接用script引入 安装vue 对不同构建版本的解释 安装命令行工具 (CLI) 安装cnpm 安装vue-cli 新建vue项目 运行服务 目录结构 ...