[JQUERY] Base64로 이미지 변환

Base64로 이미지 변환

해결법

1. ---

   1.함수 ReadFile을 () { 경우 (this.files && this.files [0]) { VAR FR 새로운을 FileReader를 () =; FR.addEventListener ( "부하"함수 (E) { document.getElementById를 ( "IMG") SRC = e.target.result.; document.getElementById를 ( "B64") = innerHTML을 e.target.result.; }); FR.readAsDataURL (this.files [0]); } } . document.getElementById를 ( "INP") 또는 addEventListener ( "변경"에서 ReadFile); <입력 ID = "INP"TYPE = '파일'>

   함수 ReadFile을 () { 경우 (this.files && this.files [0]) { VAR FR 새로운을 FileReader를 () =; FR.addEventListener ( "부하"함수 (E) { document.getElementById를 ( "IMG") SRC = e.target.result.; document.getElementById를 ( "B64") = innerHTML을 e.target.result.; }); FR.readAsDataURL (this.files [0]); } } . document.getElementById를 ( "INP") 또는 addEventListener ( "변경"에서 ReadFile); <입력 ID = "INP"TYPE = '파일'>

   (P.S하십시오의베이스 64 부호화 된 화상 (문자열) 4/3 원 화상 데이터의 크기)

   여러 이미지 업로드에 대한이 답변을 확인합니다.

   브라우저 지원 : http://caniuse.com/#search=file%20api 여기에 더 많은 정보 : https://developer.mozilla.org/en-US/docs/Web/API/FileReader

2. ---

   2.당신은 당신은 콜백 버전이나 약속 버전을 선택할 수 있습니다 :) 필요가 정확히 무엇인지. 약속은 약속 polyfill lib.You와 IE에서 작동합니다 참고 한 페이지에 한 번이 코드를 넣을 수 있습니다,이 기능은 모든 파일에 나타납니다.

   당신은 당신은 콜백 버전이나 약속 버전을 선택할 수 있습니다 :) 필요가 정확히 무엇인지. 약속은 약속 polyfill lib.You와 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);
               });
         });
       })
   

   HTML

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

3. ---

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

4. ---

   4.그것은 이연이 경우 개체 및 반환 약속 작업에 유용합니다 :

   그것은 이연이 경우 개체 및 반환 약속 작업에 유용합니다 :

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

from https://stackoverflow.com/questions/17710147/image-convert-to-base64 by cc-by-sa and MIT license