zoukankan      html  css  js  c++  java
  • html5调取手机摄像头或相册

    html5调用手机摄像头或者相册

    由于input的type=file 格式的文件的界面并不是我们所希望的界面,所以在此我隐藏input,自定义样式,这个样式就在<a>中自己定义,这里我就不再定义了

    首先 使用input的type=file,通过File API,可以在用户选取一个或多个文件之后,访问代表所选文件的一个或多个File对象,这些对象被包含在一个FileList 对象中,如果用户只选择了一个文件,那么只需要访问FileList 对象中的第一个元

    html代码如下

    <div class="pushPhoto" id="pushPhoto" style="position: relative;">
    <input type="file" accept="image/*" id="capture" value="+" capture="camera" style="display: none;position:absolute;100%; height: 100%;border:none">
    <a href="#" id="fileSelect"> + </a>
    </div>

    js代码
    //获取用户所选的文件
    var capture = $("#capture").files[0];
    var capture = $("#fileSelect");
    //在change事件发生时读取所选择的文件
    /*上传照片*/
    var fileReader; //
    var fileName;
    var _img = new Image();
    var fileSelect = $("#fileSelect");
    var capture = $('#capture');
    fileSelect.click(function () { //在点击a标签时,触发capture的点击
    if (capture) {
    capture.click();
    }
    })
    var fileURI,formData,fileName,file ;
    $('#capture').change(function () { //change事件发生时,读取文件
    fileReader = new FileReader();
    if( typeof fileReader == 'undefine'){
    tip("您的浏览器不支持fileReader!");
    }
    file = $(this)[0].files[0];//获取用户所选的文件
    //alert(file[0]);
    if(file){
    fileReader.onload = function () { //显示用户所选的缩略图
    _img.src = this.result;
    if( _img.style.width > _img.style.height){
    _img.style.width = '100%';
    _img.style.height = 'auto';
    }else{
    _img.style.height = '100%';
    _img.style.width = 'auto';
    }
    $('#pushPhoto').append(_img);
    }
    fileReader.readAsDataURL(file); //获取api异步读取的文件数据
    formData = new FormData();
    formData.append("file", file);
    fileSelect[0].style.display = 'none';

    }
    })

    //将文件上传到服务器
    $.ajax({
    url: fileURI, //文件上传到服务器的url地址
    data: formData, //保存的文件数据
    processData: false,
    contentType: false,
    type: 'POST',
    async: false,
    dataType: "json",
    success: function(data) {
    //此处要获取到文件名字(省略了)
    }
    });
    FileReader ,web应用程序可以异步的读取存储在用户计算机上的文件(或原始数据缓冲)内容,可以使用File或者Blob对象来指定所要处理的文件或者数据
    其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以驼房操作生成的DataTransfer对象,还可以是来自一个HTMLCanvasElement
    上执行mozGetAsFile()方法后的返回结果。
    //File 对象上有三个属性提供了所包含的相关信息
    name 文件名,只读字符串,不包含任何路径信息
    size 文件大小,单位为字符,只读的64位整数
    type MIME类型,只读字符串,如果类型未知,则返回空字符串
  • 相关阅读:
    净化心灵的诗歌--《当你老了》
    慎在信号的handler中嵌入复杂的逻辑
    windows远程ssh与scp操作linux
    Java Annotation(Java 注解)
    HTML5实现的类似百度文库,豆丁在线文档阅读
    FreeMarker VS Velocity(freemarker模板引擎和velocity模板引擎比较)
    J2EE牛人或者老的JAVA程序员进来帮忙指点一二,小弟很迷茫_Baidu知道
    模仿Hibernate的逆向工程_java版_源码下载
    Adobe Photoshop CS6_下载_补丁
    lucene in action_index and search
  • 原文地址:https://www.cnblogs.com/sllzhj/p/6086680.html
Copyright © 2011-2022 走看看