使用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

这是一个延迟handleReaderLoad发送pjax请求后执行的问题。工作示例：

$(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(); 
     }, 
    }); 
});