传统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. .Net WebRequest异步请求与WebClient异步请求

    很多情况下一般会使用同步方式发出请求,直到响应后再做后续的逻辑处理等,但有时候后续的逻辑处理不依赖于请求的结果或者是可以挂起等到响应后再处理,又或者是为了解决UI“假死”的现象,这时可以使用异步请求 ...

  2. NIO 学习笔记

    0. 介绍 参考   关于Java IO与NIO知识都在这里   ,在其基础上进行修改与补充. 1. NIO介绍 1.1 NIO 是什么 Java NIO 是 java 1.4, 之后新出的一套IO接 ...

  3. 新人如何进入IT行业

    你遇到了我刚毕业时遇到的问题. 现在需要知道你希望在那里就业,上海和北京就业的待遇差不多,北京能比上海稍微少点(我是指你这类刚毕业的) 说主题好了 应届毕业,找工作都很难的,因为现在很多企业是不愿意找 ...

  4. 关于使用python的open函数时报No Such File or DIr的错误

    我写的代码如下: def createFileWithFileName(localPathParam,fileName): totalPath=local_url+'\\'+fileName if n ...

  5. Beta 冲刺 （1/7）

    Beta 冲刺 (1/7) 队名:洛基小队 峻雄(组长) 已完成:β版的初步计划 后两天计划:设计角色的技能树 剩余任务:角色的技能 困难:关于技能施放以及相关伤害计算等的代码 非易 已完成:角色交互 ...

  6. Django商城项目笔记No.13用户部分-用户中心个人信息

    首先处理个人信息的显示 邮箱绑定: 首先给用户的模型类里添加一个字段来说明用户的邮箱是否激活 然后数据库迁移 python manage.py makemigrations python manage ...

  7. JFreeChart绘制XY折线图（工具类设计）

    准备用Java写通信的仿真平台作为毕业设计,相比matlab绘图,Java绘图需要自己去写很多工具类,博主在这采用了JFreeChart的开源解决方案,摸索着自己写了一个XY折线图工具类,话不多说贴源 ...

  8. Learn Algorithms With Javascript - 基于 Js 进行算法学习

    基于 javascript 学习并实现常用的经典算法,欢迎对算法和数学感兴趣的 Js 开发者参与,一起学习共同进步. 算法实现 排序 插入排序 sort/lib/insertion-sort.js 希 ...

  9. 投稿核心期刊、中文重要期刊、SCI二区及以上期刊目录

    大家在研究生期间想必均经历过投稿核心期刊的烦恼,不知道哪些是核心期刊,那些是普通期刊,万一选的不对岂不是浪费了时间,因此小顾在网络上收集了了2018北大核心期刊目录及全国中文重要期刊目录和SCI二区及 ...

  10. 洛谷 P4707 【重返现世】

    题目分析 题目就是求第K种原料的出现期望时间. 考虑广义min-max容斥. \(\text{kthmax}(S)=\sum\limits_{T\subseteq S}(-1)^{|T|-k}\bin ...