圖片轉換base64數據上傳，並且實現預覽的簡便方法

    對於很多新手來說，實現上傳圖片並且預覽功能，都會感到不知所可，然后開始在網站搜索各種各樣的圖片上傳預覽插件，但是有的時候我們只是想簡單的實現判斷格式，以及預覽的功能，使用插件的話，會使得項目的資源空間很大，代碼臃腫。

    下面，我就整理一個小方法實現判斷上傳格式，大小，以及預覽圖片的功能，大大的減少了代碼量。

    思路：點擊上傳按鈕(id=“PhotoFile”)，選擇文件，觸發改變事件，調用base64data函數，調用完畢后，執行回調函數，把返回的base64數據分別賦值到img標簽的src 和 隱藏的input 的value 上，這樣就實現了圖片的預覽，並且把隱藏的inout 里面的 base64數據提交到后端就可以了。

html:

<div id="IDPhoto">
    <input id="PhotoFile" name="" type="file">
    <input hidden id="PhotoData" name="" type="text">
    <img class="PhotoImg" src="../images/IDPhotoBG.jpg">
</div>

 

    方法

$(document).ready(function(){

  $('body').on('change','#PhotoFile',function(event) {
      base64data("PhotoFile",function(data){
          $('#PhotoFile').siblings('.PhotoImg').attr('src',data);
          $('#PhotoFile').siblings('#PhotoData').val(data);
      });
  });
});

//圖片轉換base64數據
function base64data(fileID,clackFn){ //fileID:選取文件的ID,clackFn:回調函數,size：限制的大小（單位M）
    var size = arguments[2]?arguments[2]:3;
    var file = document.getElementById(fileID);
    var arr = ["gif","jpeg","jpg","png"];
    var size = 1024*1024*parseInt(size);
    var fileContentType = file.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //文件類型
    if (file.files && file.files[0]){
        var f_size = file.files[0].size;  //文件大小
        if(arr.join(',').toLowerCase().indexOf(fileContentType.toLowerCase()) != -1){  //檢索上傳的文件類型是不是在允許的arr數組之內
            if(f_size > size){
                alert("圖片太大，請重新上傳",'確定');
                file.value="";
                return false;
            }else {
                var reader = new FileReader();
                reader.onload = function(evt){
                    clackFn(evt.target.result);
                }
                reader.readAsDataURL(file.files[0]);
            }

        } else {
            alert("文件格式不匹配，請重新上傳",'確定');
        }
    } else {  //兼容IE
        alert('請切到高級瀏覽器,再進行圖片上傳','確定');
    }
}

 

謝謝閱讀，如果能幫到您，請幫忙頂一個，當然喜歡的可以收藏一下，謝謝！～(￣▽￣～)(～￣▽￣)～

注：轉發請注明出處