最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【记录】尝试去用H5实现弹出选择相机还是相册的方式实现图片文件上传

HTML crifan 9070浏览 0评论

在折腾:

【已解决】ReactJS中如何上传照片和查看照片

期间,后来去看了看其他手机端的浏览器,比如此处:

android手机锤子M1L中的UC浏览器,效果也是不错的:

android手机锤子M1L中的自带浏览器,效果也可以:

iPhone6中微信内置浏览器,效果也不错:

iPhone6中Safari和微信内置浏览器效果一样。

iPhone6中QQ浏览器:

文件上传时,第一次点击 手动上传时崩溃了

第二次,可以弹出来选项,但是首次进入 照片图库 时,弹出是否允许访问照片的提示:

-》换句话说:

其他app内置的webview,估计也应该弹出这个提示,但是之前都没有见到。(好像是没有集成 手动上传 所以没看到。)

然后刚才iPhone6中QQ浏览器,再选择照片,加载完毕显示缩略图后,又崩溃了。。。

再去试试Safari,图片加载和显示,倒是还不错,但是有个小小的体验问题:

缩放图片,点击后图片消失后,浏览器也被缩放了,显示内容很大:

要手动再缩小回来才行。。。

总体感觉是

weiui中的uploader,手动上传控件,是可以给用户选择,是相机还是相册的

且手机端浏览器的支持度,总体上算还凑合了。但是各种细节问题,还是有待改进。

但是考虑到:

原生app(android和iOS)内置的webview貌似对于此处的相机和相册,貌似支持的还是不是很好:

至少前面的调用内置相机,有些手机就没反应,无法打开摄像头。

所以暂时还是放弃这条路吧。

然后又去iPhone中Safari中试了试react-weui中的uploader:

http://weui.github.io/react-weui/#/uploader

果然是点击+直接调用相机,而没有选择照片的选项。

看来官网demo就是这样做的。

去研究用web原生,即HTML5的方式去实现。

不过又发现,之前是由于使用了weui中的自动上传,是无法看到选择相机还是相册的。

所以就去研究,如何可以使得可以弹框,选择相册和文件。

通过对比发现了区别:

weui中自动上传时,input是:

<input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" capture="camera" multiple="" />

手动上传时,input是:

<input id="uploaderCustomInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">

前者多了个capture=“camera"

所以自动上传时只能直接调用摄像头,

而手动上传时,可以弹出选项选相机还是相册。

所以就先去PC端调试,先看看能否获得输入的图片文件,结果是可以的。

然后接着去看看:

【已解决】JS中的File对象有哪些属性以及如何获得file的data数据

然后接着就是去:

【已解决】ReactJS中如何把input上传的照片显示出缩略图

但是有个问题:

(1)英文菜单

iPhone6中,弹出来的选择照片的菜单是英文的:

Take Photo

Photo Library

Cancel

但更严重的是:

(2)iPhone6中app内嵌webview中:

点击Photo Library,直接崩溃,没法进入相册。

(3)三个android手机

锥子M1L

VIVO Y51A

华为TIT-CL00

点击+,都无法弹出选择照片的选项

即使去点击其他地方,弹出是否允许使用相机,选择允许使用相机后,此处还是无法弹出选择框,更别说使用相机或访问相册了。

-》看来对于:

                    <input
                      id="uploaderCustomInput"
                      class="weui-uploader__input"
                      type="file"
                      accept="image/*"
                      multiple=""
                      onChange={this.handleFileChange}
                    >
                    </input>

对于主流手机端浏览器支持虽然还可以,但是对于App内嵌的webview中,还是支持很不好,无法正常使用。

转载请注明:在路上 » 【记录】尝试去用H5实现弹出选择相机还是相册的方式实现图片文件上传

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (1)

  1. 我只要你的解决方案
    汪汪汪6年前 (2018-04-28)回复
92 queries in 0.173 seconds, using 22.10MB memory