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類型，只讀字符串，如果類型未知，則返回空字符串