চিত্রটি বেস 64 তে রূপান্তর করুন

Question 1

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

আমি একবার ব্যবহারকারী এটি বেছে নেওয়ার পরে বেস 64 এ ছবিটি পেতে চাই (ফর্ম জমা দেওয়ার আগে)

কিছুটা এইরকম :

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

আমি ফাইল এপিআই এবং অন্যান্য স্টাফগুলি সম্পর্কে পড়েছি, আমি একটি সাধারণ এবং ক্রস-ব্রাউজার সমাধান চাই (আই 6 / আই 7 স্পষ্টতই বাদ দেওয়া হয়নি)

কোন সাহায্য ধন্যবাদ প্রশংসা।

Question 2

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">

স্নিপেট প্রসারিত করুন

_{( পিএস: একটি বেস 64 এনকোডড চিত্র (স্ট্রিং) 4/3 মূল চিত্রের আকারের)}

একাধিক চিত্র আপলোডের জন্য এই উত্তরটি দেখুন ।

ব্রাউজার সমর্থন: http://caniuse.com/#search=file%20api
এখানে আরও তথ্য: https://developer.mozilla.org/en-US/docs/Web/API/FileReader

Question 3

ঠিক আপনার যা প্রয়োজন :) আপনি কলব্যাক সংস্করণ বা প্রতিশ্রুতি সংস্করণ চয়ন করতে পারেন। নোট করুন যে প্রতিশ্রুতিগুলি কেবল প্রতিশ্রুতি পলফিল লাইব দিয়ে IE এ কাজ করবে। আপনি এই কোডটি একবার পৃষ্ঠায় রাখতে পারেন এবং এই ফাংশনটি আপনার সমস্ত ফাইলে প্রদর্শিত হবে।

কোনও উত্স লোড করার সময় অগ্রগতি বন্ধ হয়ে গেলে লোডেন্ড ইভেন্টটি বরখাস্ত করা হয় (উদাহরণস্বরূপ "ত্রুটি", "বাতিল" বা "লোড" প্রেরণের পরে)

কলব্যাক সংস্করণ

        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);
            });
      });
    })

এইচটিএমএল

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

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

Question 5

এক্ষেত্রে ডিফার্ড অবজেক্টের সাথে কাজ করা এবং প্রতিশ্রুতি ফেরানো কার্যকর:

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); });
});

Question 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>

স্নিপেট প্রসারিত করুন

কোডানবক্স