छवि Base64 में कनवर्ट करें

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

मैं फ़ाइल एपीआई और अन्य सामान के बारे में पढ़ता हूं, मैं एक सरल और क्रॉस-ब्राउज़र समाधान (IE6 / IE7 स्पष्ट रूप से बाहर रखा गया) चाहूंगा

किसी भी मदद की सराहना की धन्यवाद।

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