本文大略先容移动端常用上传图片功能。灵巧利用轮询或长连接可实现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
页面效果
纯input与type
指明须要图片
指明须要多张图片
指明调用摄像头获取图片
指明调用摄像头并多张图片
微信 6.7.0
页面效果
微信除了调用摄像头之外,点击都显示下面这个,只有点击相册或其他办法后才有差异,下面图片展示都是其他办法的差异。
把稳点击相册在微信与系统上有差异,微信直接打开相册列表,而MIUI系统会默认打开照片列表,或者你手动选择前往相册列表。
纯input与type
指明须要图片
选择效果
指明须要多张图片
把稳这里直接把摄像头过滤了
选择效果
指明调用摄像头获取图片
同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>