Base64 인코딩 파일로 Dropzone.js 제출

Question

dropzone.js에서 base64 인코딩 파일을 만들고 PJAX를 사용하여 처리기 페이지로 보내려고합니다. 그러나 base64_data POST 요청에서 비어있는 문제가 있습니다.

$(document).ready(function(){ 
    Dropzone.autoDiscover = false; 
    $("#file-form").dropzone({ 
     paramName: 'file', 
     clickable: true, 
     maxFilesize: 1, 
     uploadMultiple: false, 
     autoProcessQueue: false, 
     accept: function(file, done){ 
      reader = new FileReader(); 
      reader.onload = handleReaderLoad; 
      reader.readAsDataURL(file); 
      function handleReaderLoad(evt) { 
       document.getElementById("id_base64_data") 
        .setAttribute('value', evt.target.result); 
      } 
      document.getElementById("id_base64_name") 
       .setAttribute('value', file.name); 
      document.getElementById("id_base64_content_type") 
       .setAttribute('value', file.type); 
      form = $('#file-form'); 
      $.pjax({ 
       method: "POST", 
       container: "#pjax-container", 
       timeout: 2000, 
       url: "/upload/", 
       data: form.serialize(), 
      }); 
      done(); 
     }, 
    }); 
}); 

형태 :

<form class="form-horizontal dropzone dz-clickable" id="file-form" action="/upload/" method="post" enctype="multipart/form-data" name="file-form"> 
    <input id="id_base64_data" name="base64_data" type="hidden"> 
    <input id="id_base64_name" name="base64_name" type="hidden"> 
    <input id="id_base64_content_type" name="base64_content_type" type="hidden"> 
    <div class="fileupload fileupload-new" data-provides="fileupload"> 
     <legend>Search for file</legend> 
    </div> 
<div class="dz-default dz-message"><span>Drop files here to upload</span></div> 
</form> 

어떤 힌트?

Answer 1

pjax 요청이 전송 된 후 지연되는 handleReaderLoad이 실행되는 문제가있었습니다. 실제 사례 :

$(document).ready(function(){ 
    Dropzone.autoDiscover = false; 
    $("#file-form").dropzone({ 
     paramName: 'file', 
     clickable: true, 
     maxFilesize: 1, 
     uploadMultiple: false, 
     autoProcessQueue: false, 
     accept: function(file, done){ 
      reader = new FileReader(); 
      reader.onload = handleReaderLoad; 
      reader.readAsDataURL(file); 
      function handleReaderLoad(evt) { 
       document.getElementById("id_base64_data") 
        .setAttribute('value', evt.target.result); 
       document.getElementById("id_base64_name") 
        .setAttribute('value', file.name); 
       document.getElementById("id_base64_content_type") 
        .setAttribute('value', file.type); 
       form = $('#file-form'); 
       $.pjax({ 
        method: "POST", 
        container: "#pjax-container", 
        timeout: 2000, 
        url: "/upload/", 
        data: form.serialize(), 
       }); 
      } 
      done(); 
     }, 
    }); 
});