传统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. JMeter安装+配置+运行

    环境配置: 操作系统:Win7系统 jdk版本:1.8 JMeter版本:3.0 一  JMeter的安装配置过程 JMeter是100%纯java应用程序,它在任何支持完整java实现的系统上都能正 ...

  2. vs 2012/2013 等工具中，使用正则表达式，查找、替换

    有这样一个需求,就是一个文本中,需要找出指定格式的字符串进行指定的替换,当前我的真实需求是,一个sql创建触发器的文本,我需要将所有的 包含 TB_SYS 的表名后面添加一个 “_NEW”字符串! 例 ...

  3. svn Please execute the 'Cleanup' command. 问题解决

    1由于使用svn 更新文件出错,导致svn中断,然后就一直循环出现  ‘’Please execute the 'Cleanup' command‘’ 问题: 查找网上方案 . 有使用sqlite3 ...

  4. shell 的echo和 printf

    shell的echo指令是输出语句  就好比Python的print 在显示字符串的时候可以省略双引号  但是最好还是带上 echo ' Ti is a dashaobing' echo Ti is ...

  5. 【转】Java学习---快速掌握RPC原理及实现

    [原文]https://www.toutiao.com/i6592365493435236872/ ​RPC概述 RPC(Remote Procedure Call)即远程过程调用,也就是说两台服务器 ...

  6. Lombok快速上手（安装、使用与注解参数）

    目录 Lombok插件安装与使用说明 常见参数 lombok的依赖于安装 依赖管理 IDEA插件的安装 @Data小例子 扩展@ToString 构造器注解扩展 @Log及其他日志注解 资料链接 Lo ...

  7. Nginx防hashdos模块使用帮助

    经过上周一周朋友们帮忙测试和bug fix,nginx_http_hashdos_module已经达到可以线上使用的水平,下面是使用记录. 下载 #wget --no-check-certificat ...

  8. 本博客已不再更新，新文章将发布在我的个人博客：https://www.tapme.top

    如题,本博客已不再更新,请访问个人博客:www.tapme.top

  9. AOP实现拦截对象以及获取切入目标方法和注解

    AOP实现拦截对象以及获取切入目标方法和注解 一.JoinPoint是什么? AspectJ使用org.aspectj.lang.JoinPoint接口表示目标类连接点对象,如果是环绕增强时,使用 o ...

  10. WorldWind源码剖析系列：插件类Plugin、插件信息类PluginInfo和插件编译器类PluginCompiler

    插件类Plugin是所有由插件编译器加载的插件子类的抽象父类,提供对插件的轻量级的访问控制功能. 插件信息类PluginInfo用来存储关于某个插件的信息的类,可以理解为对插件类Plugin类的进一步 ...