input[type=file]上傳圖片及轉為base64碼以及預覽

<input type="file" id="imgurl" capture="camera" accept="image/png,image/gif,image/jpeg"/>

在移動端上傳可以像上面那樣設置，如果不行的話可以將后面的accept屬性改成accept="image/*";

accept 屬性只能與 <input type="file"> 配合使用。它規定能夠通過文件上傳進行提交的文件類型。

如果不限制圖像的格式，可以寫為：accept="image/*"。

如果想在上傳完文件執行需求，input[type=file]用click事件是不行的，要用change事件，這樣就可以在上傳完文件后干你愛干的事。

input[type=file]的樣式如果設置不了，或者嫌設置太麻煩的話，可以直接將它的opacity設置為0，然后覆蓋在觸發的按鈕上就行。

還有如果不傳base64，而是直接用form上傳文件的話，一定要設置這個屬性：enctype="multipart/form-data"

轉base64碼(其實就是圖片的url，只不過是換了種方式來表示)

$('input[type=file]').on{'change',function(){
var reader=new FileReader();
  reader.onload=function(e){
  console.log( reader.result);  //或者 e.target.result都是一樣的，都是base64碼
}  
reader.readAsDataURL(this.files[0])
//filses就是input[type=file]文件列表，files[0]就是第一個文件，這里就是將選擇的第一個圖片文件轉化為base64的碼
}                                

 

預覽，這個最簡單，直接將上面得到的reader.result賦值給一個img標簽就可顯示，后台傳的圖片數據也直接把reader.result儲存起來發過去就可以。

其實后台的需求是要我用canvas來上傳，用canvas既能壓縮圖片，又能限制大小，又能限制尺寸，也能轉base64碼。可惜由於我能力不足，加上時間有點趕，於是就先用着這種老點的方法，不過技術是與時俱進的，不能僅僅是做出來就行，要趕上技術的變化才行，下次一定要學會用canvas來上傳圖片才行。