本文大略先容移动端常用上传图片功能。
灵巧利用轮询或长连接可实现PC与移动端数据同步,即PC端须要上传的图片是移动拍照下来或移动端硬盘储存的,不须要再传到PC上然后上传。
比如拍照上传业务。


移动端H5上传图片的办法,要点如下:

要点解析input即input标签typeinput标签的type属性,须要为fileaccept解释吸收文件类型,决定调用的资源种类capture指明调用的目标multiple是否支持多文件

移动端html5多图上传前端骚操作移动端H5页面上传图片或多张图片 Node.js

实例

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