JS將本地圖片轉化成base64碼

在圖片上傳的時候，有時候后台需要前台上傳base64文件，這時候我們就需要將圖片資源轉化成base64，下面這段js代碼就可實現此功能。

1、首先在html里定義一個input輸入框：

BASE64圖片： <input type="file" id="image"><br/>
<button id="up">上傳</button>

2、通過js將圖片資源轉化成base64碼：

$("#up").click(function(){
	    var reader = new FileReader();
	    var AllowImgFileSize = 2100000; //上傳圖片最大值(單位字節)（ 2 M = 2097152 B ）超過2M上傳失敗
	    var file = $("#image")[0].files[0];
	    var imgUrlBase64;
	    if (file) {
	        //將文件以Data URL形式讀入頁面  
	        imgUrlBase64 = reader.readAsDataURL(file);
	        reader.onload = function (e) {
	          //var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64碼部分（可選可不選，需要與后台溝通）
	          if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
	                alert( '上傳失敗，請上傳不大於2M的圖片！');
	                return;
	            }else{
	            	//執行上傳操作
	            	alert(reader.result);
	            }
	     	}
	     }			
    });

　結語：這里只是實現了將文件資源轉化成base64碼這個最基礎的操作，網上有很多據此的擴展，下一篇我會根據網上的一些資源再做整理拓展。