input-file 部分手机不能拍照问题

曾经遇到一个需求,用户拍身份证上传验证,

然后我卡在了拍照这个点上。

最初采用的是微信的 api,wx.chooseImage,

但随后发现,返回的是一种只有微信才能预览的 url 格式,

但验证是要放在 PC 上进行的,等于保存了这个 url 也没法看呀。

然后详细看了遍文档,看上去好像是说可以先上传到微信然后就可以下载到本地了,

于是又带着吐槽启用了另两个微信 api,wx.uploadImage 和 wx.dowmloadImage。

万万没想到,结局是,chooseImage 获得 localIds 然后 uploadImage 得到 serverId,再 downloadImage 又变成了 localId。

思索了一下,也许这不是浏览器权限的问题,因此找上后端一起讨论这个问题。

才知,downloadImage 得后台人员去下,具体原因他也没说明白...

好吧,稀里糊涂算是走通了拍照和上传验证这个流程。

然而,正在我准备高兴一下的时刻,对桌的同事跟我说,

刚才试了下,好像 input[type="file"] 好像在手机上相片选择室会多一个拍照的按钮。

然后我试了一下,天了噜,心中有句 NMP 不知当讲不当讲,上面走微信 api 这条路又坑又麻烦好伐。

然而,正在我准备高兴一下的时刻,又一个同事跟我说,

刚才试了下,好像我的手机不行耶,

然后集中试了一圈,确实有部分手机只有选取图片没有拍照这个选项,比如小米3/华为mate7等。

拔凉拔凉的,web 标准是多么重要呀...

所以该项目只得还是选用了微信 api 这种方法,

小小庆幸一下客户群还好都是基于微信平台,不然还得改成 webapp 了。

而随着时间流逝,

最近在 github 上寻找苹果机兼容 getUserMedia 打开手机摄像头(用于做个假 AR)的办法。

一直无果所以向大佬汇报了一下,谁知之后他给我找来了一个 camera api

试了一下,其实是个打开拍照功能,但这样跳出了浏览器,没法加东西弄成 AR 呀。

但猛然想到,说不定能解决上次那个部分手机没法拍照的问题,就去看了下源码。

不禁百脸懵逼,一切的一切只因为 accept="image/*" 这个属性!

<input type="file">      <!-- 部分手机没有拍照选项 -->
<input type="file" accept="image/*">   <!-- 有了 -->

一时瞬间苍老,不禁莞尔,感觉岁月弄人,可能这就是程序员的一生吧。

然而!这个故事还没有完!!!

accept="image/*" 没法使用 fileReader,

只能用 window.URL 的 createObjectURL,

也就意味着,它返回的是个 blob 类型的 url,没法在其他页面预览了啊喂。

最后的最后,竟然还只能走微信 api 这条路了吗,好不甘心呀,有待继续寻找....

input 的案例

https://foreverz133.github.io/demos/single/input-file.html

微信的案例(当然你也只能在微信看到效果,代码在 common.js 里面)

http://goldcard.kdcer.com/User/BindingProcessStep2

好了,走了很多弯路,与大家同勉进步,么么哒

时间: 2024-10-07 02:50:10

input-file 部分手机不能拍照问题的相关文章

h5 input file ajax实现文件上传

<input type="file" accept="image/*" height="0" class="file_input" id="file_input_ss_0" multiple>  文件域 遇到的几个BUG 已经解决 1 多选文件域,如果没有上传成功或已上传成功,再次点击文件域名选择图片时,会累积上次的文件. 例如 第一次上传1.jpg  第二次点击上传 2.jpg 第二次的上传结

WebView中input file的解决方法

public class MyWb extends Activity { /** Called when the activity is first created. */ WebView web; ProgressBar progressBar; private ValueCallback<Uri> mUploadMessage; private final static int FILECHOOSER_RESULTCODE = 1; @Override protected void onA

兼容安卓和苹果移动端就input调起手机相册和相机

以下这么写的话,苹果手机可以调起相机和相册功能,但是安卓手机只能调起相册: <input id="upLicense" onchange="preview(this,0)" type="file" name="upLicense" > <input id="upLicense" onchange="preview(this,0)" type="file&quo

Android手机多媒体——拍照和相册

一 拍照功能 1.布局文件:在线性布局中设置一个按钮,用来启动拍照功能,设置一个ImageView用来展示图像 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 android:layout_width="match_parent" 3 android:layout_height="match_parent" 4 android:orie

编译安装mmseg提示cannot find input file: src/Makefile.in错误

今天安装中文词检索功能模块 coreseek,其中一个分词模块 mmseg ,编译安装到最后,出现annot find input file: src/Makefile.in aclocal   //是一个perl 脚本程序,它的定义是:"aclocal - create aclocal.m4 by scanning configure.ac"libtoolize --force  //运行后有一个错误,不用管它.automake --add-missingautoconfautohe

从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别

背景: 在清空input file标签选中值时,分别用了以下方法,发现有的对有的错: [√]$("#file")[0].value = ""; [√]$("#file")[0].value = null; [×]$("#file").attr("value",""); [×]$("#file").attr("value",null); [√]$(&

ajax+ashx 完美实现input file上传文件

1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图:    Firefox效果图: Chrome效果图:   2.input file上传按钮美化 css: .file{ position: relative; background-color: #b32b1b; border: 1px solid #ddd; width: 68px; height: 25px; display:

No input file specified的解决方法

(一)IIS Noinput file specified 方法一:改PHP.ini中的doc_root行,打开ini文件注释掉此行,然后重启IIS 方法二:请修改php.ini找到; cgi.force_redirect = 1去掉前面分号,把后面的1改为0即cgi.force_redirect = 0 (二)apacheNo input file specified apache No input filespecified,今天是我们配置apache RewriteRule时出现这种问题,

ajax form表单提交 input file中的文件

ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了解决这个问题我走了不少弯路: 1.用原生的 input file , 不支持ajax上传文件,你肯定会说可以用 ajax form表单上传了呀?不过我后面还要调用上传成功后用js处理一些对话框,所以这种方法排除 2.用了 uploadify 上传插件,弄出来能上传东西,结果不理想:因为不能判断上传的