传统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. SQLSERVER中的资源调控器

    SQLSERVER中的资源调控器 转载自: http://wenku.baidu.com/view/0d92380cf78a6529647d5375.html http://www.cnblogs.c ...

  2. c#WebApi使用form表单提交excel，实现批量写入数据库

    思路:用户点击下载模板按钮,获取到excel模板,然后向里面填写数据保存.from表单提交的时候选择保存好的excel,实现数据的批量导入过程 先把模板放在服务器的项目目录下面:如 模板我一般放在:F ...

  3. elasticsearch DSL查询

    总结一个DSL的用法吧,语法网上查去,只记录一点心得,也是研究了半天,太麻烦了 先附上python代码 #!/usr/bin/env python # _*_ coding:utf-8 _*_ fro ...

  4. Cisco ASA 使用ASDM 配置管理口 方法

    CISCO ASA防火墙ASDM安装和配置 准备一条串口线一边接台式机或笔记本一边接防火墙的CONSOLE 接口,通过CRT或者超级终端连接ASA在用ASDM图形管理界面之前须在串口下输入一些命令开启 ...

  5. Python实例---beautifulsoup小Demo

    豆瓣 # coding:utf - 8 from urllib.request import urlopen from bs4 import BeautifulSoup html = urlopen( ...

  6. MySQL一个延迟案例

    突然接到报警显示MySQL主从之间延迟过大,随后尽快到集群上面看看,进行排查. 首先我们查看延迟是由什么造成的,排查一遍过后发现不是网卡和从库机器的负载,那就要从其他地方来排除了 查看binlog日志 ...

  7. 高斯求积公式 matlab

    1. 分别用三点和四点Gauss-Chebyshev公式计算积分 并与准确积分值2arctan4比较误差.若用同样的三点和四点Gauss-Legendre公式计算,也给出误差比较结果. 2*atan( ...

  8. 使用Python+opencv2时的文件命名及路径问题

    最近在做一个数字图像的小项目,在最后的界面与程序结合阶段总是出现单个程序可以运行,但是使用界面传递的参数就运行不了的情况.在网上查了很多相关错误,最终确定是文件命名问题. 错误如下: cv2.erro ...

  9. 【Python求助】在eclipse和pycharm中，通过adb install安装中文名字APK时老是报错，如何解决

    # -*- coding: utf-8 -*- import os import sys import subprocess import time from uiautomator import d ...

  10. 前端工程构建工具之Yeoman

    一.Yeoman 简介 通常在开发新项目时我们都需要配置工程环境,开发目录,需要下载一些库.框架文件(如 jQuery.Backbone 等),配置编译环境(Less.Sass.Coffeescrip ...