h5圖片上傳簡易版（FileReader+FormData+ajax）

1、選擇圖片（input的file類型）

<input type="file" id="inputImg">

1. input的file類型會渲染爲一個按鈕和一段文字。點擊按鈕可打開文件選擇窗口；file類型的input會有files屬性，保存着文件的相關信息。

2. input.files是一個數組，由傳入的file對象組成。每一個file對象包含如下屬性：

lastModified：數值，表示最近一次修改時間的毫秒數；

lastModifiedDate：對象，表示最後一次修改時間的Date對象（高程中說是字符串，根據上圖可看出應該爲對象，爲了層級清晰未對其展開，你們可自行查看，其可調用Date對象的有關方法，例如getDay方法）；

name：本地文件系統中的文件名；

size：文件的字節大小；

type：字符串，文件的MIME類型；

weblitRelativePath：此處爲空；當在input上加上webkitdirectory屬性時，用戶可選擇文件夾，此時weblitRelativePath表示文件夾中文件的相對路徑。好比：

2、讀取圖片數據 （FileReader對象）

FileReader  對象是一種異步文件讀取機制，使用 File或 Blob對象指定要讀取的文件或數據，結合input:file能夠很方便的讀取本地文件。

var reader = new FileReader();//建立一個FileReader實例
reader.readAsDataURL(file);//調用fileReader對象的方法,將文件讀取爲DataURL reader.onload = function(){//處理事件
　　console.log(this.result);//讀取完成後，數據保存在對象的result屬性中,打印結果以下：（截取部分結果）
}

3、上傳圖片   （ formData對象 ）

1. 用一些鍵值對來模擬一系列表單控件，以key與value形式組裝成一個對象，FormData對象的操做方法，所有在原型中，本身自己沒任何的屬性及方法。

2. 異步上傳二進制文件。

3. 屬性不是直接掛載在你這個FormData實例上。能夠經過它提供的迭代器，或者get方法去取值。

var formData=new FormData();//建立一個空對象實例
formData.append('key',value);//向該對象添加字段
console.log(formData.get("key")); // 打印key值對應的value值

4. formData操做

（1）獲取值：經過formData.get(key)/getAll(key)來獲取對應的value

（2）添加數據：經過formData.append(key, value)來添加數據，若是指定的key不存在則會新增一條數據，若是key存在，則添加到數據的末尾

（3）修改數據：經過formData.set(key, value)來設置修改數據，若是指定的key不存在則會新增一條，若是存在，則會修改對應的value值

（4）判斷是否該數據：經過formData.has(key)來判斷是否對應的key值

（5）刪除數據：經過formData.delete(key)，來刪除數據

（6）遍歷數據：經過formData.entries()來獲取一個迭代器，而後遍歷全部的數據

（7）發送數據：ajax異步請求

4、jQuery上傳圖片代碼

var formdata; if (typeof FileReader === 'undefined') {//檢測瀏覽器對FileReader兼容性
        showimg.innerHTML = "抱歉，你的瀏覽器不支持 FileReader"; imginput.setAttribute('disabled', 'disabled'); } else { imginput.addEventListener('change', function() { var file = this.files[0]; console.log(file); if (!/image\/\w+/.test(file.type)) { alert("請確保文件爲圖像類型"); return false; } var reader = new FileReader();//建立一個FileReader實例
　　　　　　　reader.readAsDataURL(file);//將文件內容進行base64編碼後輸出
　　　　　　　//console.log(reader) 
　　　　　　　reader.onload = function(e) { 　　　　　　 　　　　//console.log(this.result);//讀取完成後，數據保存在對象的result屬性中 
　　　　　　　　　　$(showimg).append('<img src="' + this.result + '" alt=""/>');//將選中的圖片顯示在頁面上 //alert('111');　　
　　　　　　　　　  formData=new FormData(); 　　　　　　　　　　formData.append('file',file); 　　　　　　　　　　console.log(formData.getAll('file')); 　　　　　　 } 　　　}, false); } $.ajax({ url : url, type : 'post', dataType:"json", data:formData, cache: false, processData : false,// 告訴jQuery不要去處理髮送的數據 
    contentType : false,// 告訴jQuery不要去設置Content-Type請求頭
    success : function(data, status, xhr) { //alert(1);
 }, error : function(xhr, errorType, error) { //alert(0);
 } });