实战,让学习更简单     全国咨询热线:400-009-1906

北京 切换校区

全国24小时免费热线

400-009-1906

【前端骚操作】移动端H5页面上传图片或多张图片

时间:2018-11-30   来源:尚学堂   阅读:74
首页> 【前端骚操作】移动端H5页面上传图片或多张图片

       传统PC网页上传文件,大家都已经熟悉,这里不做介绍。

       本文简单介绍移动端常用上传图片功能。灵活使用轮询或长连接可实现PC与移动端数据同步,即PC端需要上传的图片是移动拍照下来或移动端硬盘储存的,不需要再传到PC上然后上传。比如拍照上传业务。。。

       移动端H5上传图片的方式,要点如下:

       要点解析input即input标签typeinput标签的type属性,需要为fileaccept说明接收文件类型,决定调用的资源种类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

       页面效果

「前端骚操作」移动端H5页面上传图片或多张图片

       纯input与type

「前端骚操作」移动端H5页面上传图片或多张图片

       指明需要图片

「前端骚操作」移动端H5页面上传图片或多张图片

       指明需要多张图片

       指明调用摄像头获取图片

「前端骚操作」移动端H5页面上传图片或多张图片

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

「前端骚操作」移动端H5页面上传图片或多张图片

       微信 6.7.0

       页面效果

「前端骚操作」移动端H5页面上传图片或多张图片

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

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

「前端骚操作」移动端H5页面上传图片或多张图片

       纯input与type

「前端骚操作」移动端H5页面上传图片或多张图片

       指明需要图片

「前端骚操作」移动端H5页面上传图片或多张图片

       选择效果

「前端骚操作」移动端H5页面上传图片或多张图片

       指明需要多张图片

「前端骚操作」移动端H5页面上传图片或多张图片

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

       选择效果

「前端骚操作」移动端H5页面上传图片或多张图片

       指明调用摄像头获取图片

       同Chrome

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

       同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>

相关资讯

  • 北京校区
  • 山西校区
  • 郑州校区
  • 武汉校区
  • 四川校区
  • 长沙校区
  • 深圳校区
  • 上海校区
  • 广州校区
  • 保定招生办

北京海淀区校区(总部):北京市海淀区西三旗街道建材城西路中腾建华商务大厦东侧二层尚学堂
北京京南校区:北京亦庄经济开发区科创十四街6号院1号楼 赛蒂国际工业园
咨询电话:400-009-1906 / 010-56233821
面授课程: JavaEE培训大数据就业班培训大数据云计算周末班培训零基础大数据连读班培训大数据云计算高手班培训人工智能周末班培训人工智能+Python全栈培训H5+PHP全栈工程师培训

山西学区地址:山西省晋中市榆次区大学城大学生活广场万科商业A1座702
咨询电话:0354-3052381 / 18903441162

郑州学区地址:金水区东风路经三路北100米注协大厦10楼
咨询电话:0371-55177956 

武汉学区地址:湖北省武汉市江夏区江夏大道26号 宏信悦谷创业园4楼
咨询电话:027-87989193

四川学区地址:成都市高新区锦晖西一街99号布鲁明顿大厦2栋1003室
咨询电话:028-65176856 / 13880900114

长沙学区地址:长沙市岳麓区麓源路湖南电子商务基地5楼(公交车站:六沟垅)
咨询电话:0731-83072091

深圳校区地址:深圳市宝安区航城街道航城大道航城创新创业园A4栋210(固戍地铁站C出口)
咨询电话:0755-23061965 / 18898413781

上海尚学堂松江校区地址:上海市松江区荣乐东路2369弄45号绿地伯顿大厦2层
咨询电话:021-67690939

广州校区地址:广州市天河区元岗横路31号慧通产业广场B区B1栋6楼尚学堂(地铁3号线或6号线到“天河客运站”D出口,右拐直走约800米)
咨询电话:020-2989 6995

保定招生办公室

地址:河北省保定市竞秀区朝阳南大街777号鸿悦国际1101室

电话:15132423123

Copyright 2006-2018 北京尚学堂科技有限公司  京ICP备13018289号-19  京公网安备11010802015183  
媒体联系:18610174079 闫老师  

有位老师想和您聊一聊