手机浏览器<input type="file">拍照兼容

项目中一个功能是拍照上传,开始想着不是很简单吗?不就是

<input type="file" id="file" accept="image/*;capture=camera" />

但是由于目前做的是混合app,在ios下是可以正常拍照的,安卓用扣扣,UC各种浏览器打开也都没问题,然而安卓一旦脱离这些浏览器,就只能选择相册中的照片不能拍照了

网上找了一堆input的兼容,但是都没有效果

后来找到了:http://www.html5plus.org/doc/zh_cn/camera.html

上代码:

拍照:

getCamera(e){
                var that=this
                plus.camera.getCamera().captureImage(function(e){
                    console.log(e);
                    plus.io.resolveLocalFileSystemURL(e, function(entry) {
                        var path = entry.toLocalURL();
                        document.getElementById("pic").src = path;

                    }, function(e) {
//                        mui.toast("读取拍照文件错误:" + e.message);
                    });

                });
            },

相册获取图片:

album(){
                var that=this
                plus.gallery.pick(function(path){
                    plus.io.resolveLocalFileSystemURL(path, function(entry) {
                        var path = entry.toLocalURL();
                        document.getElementById("pic").src = path;

                    }, function(e) {
//                        mui.toast("读取拍照文件错误:" + e.message);
                    });
                });
            },

上传:

 upload(src){
                //服务端接口路径
                var that=this

                //获取图片元素
//              var files = document.getElementById(‘headimg‘);
                // 上传文件
                //              task.addData("name","photo");
                var wt=plus.nativeUI.showWaiting();
                var task=plus.uploader.createUpload(url,
                    {method:"POST", priority: 60, timeout: 20, blocksize:100000000241024,retry:1},
                    function(t,status){ //上传完成

                        if(status==200){
//                                alert("上传成功:"+t.responseText);
                            wt.close(); //关闭等待提示按钮
                        }else{
                            alert("上传失败");
                            wt.close();//关闭等待提示按钮
                        }
                    }
                );
                //添加其他参数
                task.addFile(src,{key:"uploadFile"});

                task.start();
            }

经测试,此方式可兼容安卓,iOS,然而图片未压缩,上传速度慢,同样查看文档找到压缩代码:

 resizeImage(src) {
              var that = this;
              plus.zip.compressImage(
                {
                  src: src,
                  dst: src,
                  overwrite: true,
                  width: ‘270px‘, //这里指定了宽度,同样可以修改
                  format: ‘jpg‘,
                  quality: 100  //图片质量不再修改,以免失真
                },
                function(e) {
                  plus.nativeUI.closeWaiting();
                  that.upload(e.target);  //上传图片, e.target存的是本地路径!
                },
                function(err) {
                  plus.nativeUI.alert(‘未知错误!‘,function() {
//                    mui.back();
                  });
                }
              );
            },

以上。

原文地址:https://www.cnblogs.com/suiyide/p/9242664.html

时间: 2024-10-08 01:18:47

手机浏览器<input type="file">拍照兼容的相关文章

input type="file" 取得本地路径是不可能兼容所有浏览器的。

昨天公司需要做个对本地上传图片大小和尺寸的检测,需要用js来判断.经过我一天的研究发现,发现在ie下input的value值是本地的绝对路径,而高端浏览器,如谷歌,火狐却不是绝对路径,也就是说这些高端浏览器出于安全考虑不允许读到本地绝对路径(具体的危险待查).也就是说只有通过后端来解决这个问题. 前端高级浏览器可以用html5来解决. 还有就是某些浏览器的解决方法空了再加上来. input type="file" 取得本地路径是不可能兼容所有浏览器的.,布布扣,bubuko.com

手机QQ浏览器和微信内置webview对input type="file" 的change事件不灵

做一个H5页面,选中图片后上传,遇到手机QQ浏览器时   不能及时识别change事件,真是日了狗了,下面是针对这一现象的解决办法,不用change事件: <!DOCTYPE> <html>     <head>         <title></title>         <meta charset="utf-8"/>         <meta Content-Type="applicatio

纯css兼容个浏览器input[type=&#39;radio&#39;]不能自定义样式

各个浏览器对于表单input[type='radio'].input[type='checkbox']的样式总是各有差异 //html <div class="remember-account"> <input type="checkbox"> <span>记住账号</span> </div> //css .remember-account { display: inline-block; font-siz

文件上传按钮input[type=&quot;file&quot;]按钮美化时在IE8中的bug【兼容至IE8】

首先看一下完成后的效果,鼠标移入可改变为手指的效果. 在此就不加图标了 <label class="file-upload"> <span>上传附件</span> <input type="file" name=""> </label> 在IE8中需要将input透明后还不能完全达到效果,还需要将字体设大一些,撑开input,这是IE自带的兼容问题. .file-upload{ disp

html5手机web app &lt;input type=&quot;file&quot; &gt; 只调用图库,禁止调用摄像头?

<input type="file" accept="image/*"><input type="file" accept="video/*"><input type="file" accept="audio/*"> 分别是下面的情况

自定义input[type=&quot;file&quot;]的样式

input[type="file"]的样式在各个浏览器中的表现不尽相同: 1. chrome: 2. firefox: 3. opera: 4. ie: 5. edge: 另外,当我们规定 input[type="file"] 的高度,并把它的行高设置成与其高度相等后,chrome中难看的样式出现了: “未选择任何文件”这一行并没有竖直居中. 似乎在 firefox 中好看一些,嗯,我比较喜欢用 firefox.但是这些浏览器中的表现不一致,我们必须做兼容处理. 思

input type=file上传控件老问题

// 1.用INPUT控制上传文件时,点击INPUT控件出现文件选择框. // 2.如果在手机上使用时,一般不会出现这种较丑的 // 3.于是就自然想到将控件隐藏,然后用一个按钮代替,点击按钮时在函数里使用脚本触发INPUT控件的 // 4.结果发现无效,无法使用JS触发INPUT的控件.(在PC端有的浏览器可以,在手机浏览器中有的安卓机可以,苹果机不行) <form> <input name="photos" type="file" accept

INPUT[type=file]的change事件不触发问题

在网页上要操作文件通常会使用INPUT[type=file]控件,但这个控件的设计很蛋疼.它不像其它编程语言中文件选择后会触发一个事件,只是让上面的文字改变,而这个改变可能会触发change事件而已.对于文字没改变的选择,change事件则不会触发. 当INPUT[type=file]控件上已经选择过一次文件之后,再次点击它选择同一个文件时change事件就不会触发.因为第二次选择后里面的文字和第一次是一样的,没有改变.还有个更蛋疼情况是有些浏览器会自动记住控件上的文字,即使页面关闭后重新打开还

salesforce零基础学习(八十九)使用 input type=file 以及RemoteAction方式上传附件

在classic环境中,salesforce提供了<apex:inputFile>标签用来实现附件的上传以及内容获取.salesforce 零基础学习(二十四)解析csv格式内容中有类似的使用此标签进行解析附件内容,后台只要声明String类型变量用来存储附件名称,Blob类型变量用来存储附件的内容即可. 但是当我们的项目整体使用第三方的前端框架,例如VUE或者angular等前端框架时,有时使用apex:inputFile反而不是很方便,需要用到html的原生的附件上传的标签<inpu