圖像轉換爲Base64

Question

<input type="file" id="asd"/> 

我想獲得在的base64圖像一旦用戶選擇了

喜歡的東西（在提交表單前）：

$(input).on('change',function(){ 
    var data = $(this).val().base64file(); // it is not a plugin is just an example 
    alert(data); 
}); 

我讀文件API和其他東西，我想一個簡單的和跨瀏覽器的解決方案（顯然排除IE6/IE7）

任何幫助表示讚賞謝謝。

Answer 1

function readFile() { 
 
    
 
    if (this.files && this.files[0]) { 
 
    
 
    var FR= new FileReader(); 
 
    
 
    FR.addEventListener("load", function(e) { 
 
     document.getElementById("img").src  = e.target.result; 
 
     document.getElementById("b64").innerHTML = e.target.result; 
 
    }); 
 
    
 
    FR.readAsDataURL(this.files[0]); 
 
    } 
 
    
 
} 
 

 
document.getElementById("inp").addEventListener("change", readFile);

<input id="inp" type='file'> 
 
<p id="b64"></p> 
 
<img id="img" height="150">

_{（P.S： Base64編碼圖像（字符串）4/3的原始圖像數據的大小）}

Check this answer for multiple images upload。

瀏覽器支持：http://caniuse.com/#search=file%20api
此處瞭解詳情：https://developer.mozilla.org/en-US/docs/Web/API/FileReader

Answer 2

正是你需要的:)你可以選擇回調版本或承諾版本。請注意，promise只能在Promise的polyfill lib中使用。您可以將此代碼放在頁面上一次，並且此函數將顯示在所有文件中。

時進步上的 裝載停止的資源（後如「錯誤」，「中止」或「裝載」已 派出）

回調版本loadend事件被觸發

 File.prototype.convertToBase64 = function(callback){ 
       var reader = new FileReader(); 
       reader.onloadend = function (e) { 
        callback(e.target.result, e.target.error); 
       }; 
       reader.readAsDataURL(this); 
     }; 

     $("#asd").on('change',function(){ 
      var selectedFile = this.files[0]; 
      selectedFile.convertToBase64(function(base64){ 
       alert(base64); 
      }) 
     }); 

無極版

File.prototype.convertToBase64 = function(){ 
     return new Promise(function(resolve, reject) { 
       var reader = new FileReader(); 
       reader.onloadend = function (e) { 
        resolve({ 
         fileName: this.name, 
         result: e.target.result, 
         error: e.target.error 
        }); 
       }; 
       reader.readAsDataURL(this); 
     }.bind(this)); 
    }; 

    FileList.prototype.convertAllToBase64 = function(regexp){ 
     // empty regexp if not set 
     regexp = regexp || /.*/; 
     //making array from FileList 
     var filesArray = Array.prototype.slice.call(this); 
     var base64PromisesArray = filesArray. 
      filter(function(file){ 
      return (regexp).test(file.name) 
      }).map(function(file){ 
      return file.convertToBase64(); 
      }); 
     return Promise.all(base64PromisesArray); 
    }; 

    $("#asd").on('change',function(){ 
     //for one file 
     var selectedFile = this.files[0]; 
     selectedFile.convertToBase64(). 
      then(function(obj){ 
      alert(obj.result); 
      }); 
     }); 
     //for all files that have file extention png, jpeg, jpg, gif 
     this.files.convertAllToBase64(/\.(png|jpeg|jpg|gif)$/i).then(function(objArray){ 
      objArray.forEach(function(obj, i){ 
        console.log("result[" + obj.fileName + "][" + i + "] = " + obj.result); 
      }); 
     }); 
    }) 

HTML

<input type="file" id="asd" multiple/> 

Answer 3

它是有用的在這種情況下與Deferred Object工作，並返回承諾：

function readImage(inputElement) { 
    var deferred = $.Deferred(); 

    var files = inputElement.get(0).files; 
    if (files && files[0]) { 
     var fr= new FileReader(); 
     fr.onload = function(e) { 
      deferred.resolve(e.target.result); 
     }; 
     fr.readAsDataURL(files[0]); 
    } else { 
     deferred.resolve(undefined); 
    } 

    return deferred.promise(); 
} 

而上述功能可以以這種方式使用：

var inputElement = $("input[name=file]"); 
readImage(inputElement).done(function(base64Data){ 
    alert(base64Data); 
}); 

還是在你的情況：

$(input).on('change',function(){ 
    readImage($(this)).done(function(base64Data){ alert(base64Data); }); 
}); 

Answer 4

<input type="file" onchange="getBaseUrl()"> 


function getBaseUrl() { 
    var file = document.querySelector('input[type=file]')['files'][0]; 
    var reader = new FileReader(); 
    var baseString; 
    reader.onloadend = function() { 
     baseString = reader.result; 
    }; 
    console.log(baseString); 
}