it-swarm.asia

تحويل الصورة إلى Base64

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

قرأت عن File API والأشياء الأخرى ، أريد حلاً بسيطًا ومتصفحًا متقاطعًا (IE6/IE7 مستبعد بوضوح)

أي مساعدة تقدير شكرا.

69
bombastic
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: A base64 صورة مشفرة (سلسلة) 4/3 حجم بيانات الصورة الأصلية)

التحقق من هذه الإجابة عن تحميل صور متعددة .

دعم المتصفح: http://caniuse.com/#search=file٪20api
مزيد من المعلومات هنا: https://developer.mozilla.org/en-US/docs/Web/API/FileReader

174
Roko C. Buljan

بالضبط ما تحتاجه :) يمكنك اختيار نسخة رد الاتصال أو إصدار الوعد. لاحظ أن الوعود ستعمل في IE فقط مع Promise polyfill lib.يمكنك وضع هذا الرمز مرة واحدة على الصفحة ، وستظهر هذه الوظيفة في جميع ملفاتك.

يتم تشغيل حدث التحميل عند توقف التقدم عند تحميل أحد الموارد (على سبيل المثال بعد إرسال "خطأ" أو "إحباط" أو "تحميل")

نسخة رد الاتصال

        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/>
34
Alex Nikulin

من المفيد العمل مع الكائن المؤجل في هذه الحالة ، وإعادة الوعد:

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); });
});
5
Vasyl Senko
<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); 
}
1
Василь Петров