圖片轉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]) return; const FR = new FileReader(); FR.addEventListener("load", function(evt) { document.querySelector("#img").src = evt.target.result; document.querySelector("#b64").textContent = evt.target.result; }); FR.readAsDataURL(this.files[0]); } document.querySelector("#inp").addEventListener("change", readFile);

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

_{（ PS：一張base64編碼的圖片（String）是原始圖片數據大小的4/3）}

檢查此答案以獲取多張圖片上傳。

瀏覽器支持： http ://caniuse.com/#search=file%20api
更多信息： https ://developer.mozilla.org/en-US/docs/Web/API/FileReader

Answer 2

正是您需要的：）您可以選擇回調版本或承諾版本。 請注意，promise 只能在 IE 中使用 Promise polyfill lib。您可以將此代碼放在頁面上一次，此功能將出現在您的所有文件中。

loadend 事件在資源加載停止時觸發（例如，在“error”、“abort”或“load”已被調度之后）

回調版本

        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

<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); 
    };
    reader.readAsDataURL(file);
}

Answer 4

在這種情況下使用Deferred Object很有用，並返回 promise：

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 5

使用 jquery 將圖像轉換為 base64 的函數（您可以轉換為 vanila js）。 希望對你有幫助！

用法：輸入是你的nameId 輸入有文件圖片

<input type="file" id="asd"/>
<button onclick="proccessData()">Submit</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

async function converImageToBase64(inputId) {
  let image = $('#'+inputId)[0]['files']

  if (image && image[0]) {
    const reader = new FileReader();

    return new Promise(resolve => {
      reader.onload = ev => {
        resolve(ev.target.result)
      }
      reader.readAsDataURL(image[0])
    })
  }
}

async function proccessData() {
  const image = await converImageToBase64('asd')
  console.log(image)
}

</script>

示例：converImageToBase64('yourFileInputId')

https://codepen.io/mariohandsome/pen/yLadmVb

Answer 6

 // https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL /* Simple */ function previewImage( image, preview, string ) { var preview = document.querySelector( preview ); var fileImage = image.files[0]; var reader = new FileReader(); reader.addEventListener( "load", function() { preview.style.height = "100"; preview.title = fileImage.name; // convert image file to base64 string preview.src = reader.result; /* --- */ document.querySelector( string ).value = reader.result; }, false ); if ( fileImage ) { reader.readAsDataURL( fileImage ); } } document.querySelector( "#imageID" ).addEventListener( "change", function() { previewImage( this, "#imagePreviewID", "#imageStringID" ); } ) /* Simple || */

 <form> File Upload: <input type="file" id="imageID" /><br /> Preview: <img src="#" id="imagePreviewID" /><br /> String base64: <textarea id="imageStringID" rows="10" cols="50"></textarea> </form>

密碼箱

Answer 7

對於現代瀏覽器（不支持 IE）

html文件輸入

<style>
.upload-button {
  background-color: grey;
}

.upload-button input{
  display:none;
}
</style>
<label for="upload-photo" class="upload-button">
    Upload file
    <input
     type="file"
     id="upload-photo"
    </input>
</label>

JS

document.getElementById("upload-photo").addEventListener("change", function({target}){
 if (target.files && target.files.length) {
      try {
        const uploadedImageBase64 = await convertFileToBase64(target.files[0]); 
        //do something with above data string 
      } catch() {
        //handle error
      }
    }
})

function convertFileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
  });
}