zoukankan      html  css  js  c++  java
  • Input输入框调用相机

    Input输入框调用摄像机


    <input type="file" class="input" accept="image/jpg, image/jpeg" capture="camera">

    1   限制文件类型accept="" accept属性必须用“image/*”accept表示,直接打开系统 文件目录。

    2 capture捕获系统默认的设备 camera--照相机;camcorder--摄像机;microphone--录 音。

    3 multiple 支持多选 加上multiple后,capture就没啥用了,因为multiple是专门用 来支持多选的。

     

    获取上传的对象

    <input type="file" @change="tirggerFile($event)">

     

    tirggerFile : function (event) {

      var file = event.target.files; // (利用console.log输出看file文件对象)

      let fileUrl = URL.createObjectURL(file [0]);  // 获取文件url

     }

     

    本人的例子:

    <input class="fileStyle" @change="cha($event)"  type="file" multiple  accept="image/*">

    cha(event){
      let fileList = event.target.files;//文件信息
      let fileUrl = URL.createObjectURL(fileList[0]);  // 获取文件url
      this.uploadingImg=fileUrl
    },

    data() {
      return {
          uploadingImg:'', //用户上传的图片
        }},

    其他

    <input type="file" name="file" @change="selectPhoto($event)" accept="image/*"multiple>

    selectPhoto(event){

                    console.log(event.target.files)

                    let fileList = event.target.files

                    for(let i=0;i<fileList.length;i++){

                        this.fileArry.push(fileList[i])

                        let fileUrl = URL.createObjectURL(fileList[i]);  // 获取文件url

                        this.list.push({msrc:fileUrl,src:fileUrl}) // data中显示的图片url

                    }

                    // let fileList=$(".photoFile").get(0).files[0] // 获取input file 文件信息

                    // let fileUrl = URL.createObjectURL(fileList);  // 获取文件url

                    // this.fileArry.push(fileList)

                    console.log(this.fileArry)

                    // this.list.push({msrc:fileUrl,src:fileUrl})

                    event.target.value = "" // 解决不能选同一个文件

              },

    本人的参考连接

      https://bbs.csdn.net/topics/391015496

      https://blog.csdn.net/weixin_33901641/article/details/91444059

      https://jingyan.baidu.com/article/cbcede071f349f02f40b4d38.html

      https://www.cnblogs.com/aprilchen-/p/10897115.html

      https://www.cnblogs.com/beileixinqing/p/8043703.html

    窗竹影摇书案上,野泉声入砚池中。 少年辛苦终身事,莫向光阴惰寸功
  • 相关阅读:
    css选择器分类及运用
    盒模型的三大类简介
    html学习总结
    html基础知识
    iOS UITextFeild获取高亮部分的长度
    iOS问题:pch not found
    对KVC和KVO的理解
    数据库设计三范式
    Hibernate中解决No Hibernate Session bound to thread问题
    call by value 和 call by reference 的区别
  • 原文地址:https://www.cnblogs.com/qhantime/p/11331896.html
Copyright © 2011-2022 走看看