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;width: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类型，只读字符串，如果类型未知，则返回空字符串