Blob 파일 JSONifying

Question

Blob 파일을 JSON 화하여 AJAX 요청을 통해 보낼 수있게하려고합니다. 나는 성공없이 아래 코드를 시도했다. JSONified 파일을 구문 분석 할 때 크기가 훨씬 작은 다른 파일 만 가져옵니다.

function test(blob, cb) { 

     var fileReader = new FileReader() 
     fileReader.readAsArrayBuffer(blob) 
     fileReader.onloadend = function() {    

      // client 
      var arry = Array.from(new Uint8Array(fileReader.result)) 
      var data = {data: arry } 
      var json = JSON.stringify(data) 

      // server 
      var parse = JSON.parse(json) 
      var arr = parse.data.buffer 
      var blob = new Blob([arr]) 
     }   
} 

Answer 1

당신은 FileReader.readAsDataURL() 메소드를 사용하려고하고 base64로 인코딩 된 문자열로 데이터를 전송하고,보다 것은 서버 측에서 그것을 디코딩 할 수있다. Base64 문자열은 배열을 나타내는 json 문자열보다 훨씬 작습니다.

여기에 예를 들어

function getBase64() { 
 
    var file = document.querySelector('input[type=file]').files[0]; 
 
    var reader = new FileReader(); 
 
    reader.addEventListener("load", function() { 
 
    \t document.getElementById("result").value = reader.result; 
 
    }, false); 
 
    
 
    if (file) { 
 
    reader.readAsDataURL(file); 
 
    } 
 
}

<input type="file" onchange="getBase64()" /> 
 
<br/> 
 
<textarea id="result"></textarea>

Answer 2

당신은 FormData를 사용할 수 있습니다. (편의상)

JQuery와 예 :

var oFormData = new FormData(); 
$(':input', this).each(function(){ 
    if(this.name){ 
     var oValue = this.value; 
     if(this.type == 'file'){ 
      oValue = this.files[0]; //TODO if "input file multiple" need loop each value 
     } 
     oFormData.append(this.name, oValue); 
    } 
}); 

$.ajax({ 
    url: 'http://example.com/xhr', 
    type: "POST", 
    data: oFormData, 
    processData: false, 
    contentType: false, 
    error: function (oRequest, sTextStatus, oErrorThrown){ 
     console.log(sTextStatus); 
    }, 
    success: function (oData, sTextStatus, oRequest){ 
     console.log(oData); 
    }, 
});