掉摄像头进行拍照上传图片

1.第一种方法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-3.3.1.min.js"> </script><!--根据路径自行引入-->
        <style>
            #filed{
                width:100%;
                height:50px;
                border: 1px solid #ccc;
            }
            .imgs{
                width: 100px;
            }
        </style>
    </head>
    <body>
        <!-- <input type="file" id="filed" accept="image/*" capture="camera"/><!-- //直接调用摄像头拍照 -->
        <input type="file" id="filed"/>
        <img src="" alt="" class="imgs">
    </body>
    <script>
    //在input file内容改变的时候触发事件
    $('#filed').change(function(){
        //获取input file的files文件数组;
        //$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
        //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
          var file = $('#filed').get(0).files[0];
        //创建用来读取此文件的对象 运行吧
    //  你要的图片信息啥的不都有了吗  然后在formdata 提交打印出来的信息 你在手机上也能调动拍照 跟图库
        //alert(file.name)
        // alert(file)
        console.log(window.URL.createObjectURL(file))
        var imgURl = window.URL.createObjectURL(file)
           $(".imgs").attr("src",imgURl)  
    })
    </script>
</html>

2.这种方法和上面的是一样的但是上面的不兼容火狐这个兼容火狐

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-3.3.1.min.js"></script>
    </head>
    <body>
        <div class="ge_pic_icon_Infor"></div>
        <div class="Infor_file">
            <input type="file" name="uploadPicture" id="file" value="" title="上传照片" accept="image/*" capture="camera" onchange="getPhoto(this)"/>
        </div>
    </body>
    <script>
    function getPhoto(node) {
        var imgURL = ""; //在上面最先声明一个函数内的全局变量  下面无论哪个判断执行 都会改变这个哥变量
        var file = null;
        try{ //如果过成功执行
            var file = null;
            if(node.files && node.files[0] ){
                file = node.files[0]; //这个file是图片的各种信息,
                // alert(file)
            }else if(node.files && node.files.item(0)) {
                file = node.files.item(0); //这也是file是图片的各种信息,
            }
            //Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径
            try{ //上面那个判断成功  执行//  这个是针对火狐的 因为这个火狐今年改变了  按照上面那种方法行不通了,前一段时间我都被坑了
                imgURL =  file.getAsDataURL();// 这个如果在火狐浏览器上就执行 也会改变最上面的那个个变量
            }catch(e){//上面那个判断不成功 这个执行执行
                imgRUL = window.URL.createObjectURL(file);//这个如果在火狐浏览器上就执行 也会改变最上面的那个个变量
              //imgRUL 这个是实例化 变成图片路径后的参数,img src里就是填这个路径
            }
        }catch(e){ //不成功执行
            if (node.files && node.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    imgURL = e.target.result;
                };
                reader.readAsDataURL(node.files[0]);
            }
        }
        creatImg(imgRUL);
        
        return imgURL; 
        
        ///发起fromdata 传图片写在这。  就发送file 差不多懂了吧？ 。
    }
    function creatImg(imgRUL){//图片展示的
        // $(".imgs").attr("src",imgRUL)
        var textHtml = "<img src='"+imgRUL+"'width='300px' height='450px'/>";
        $(".ge_pic_icon_Infor").html(textHtml);
    }
    </script>
</html>

掉摄像头进行拍照上传图片

猜你喜欢