使用base64编码文件提交Dropzone.js [英] Submitting Dropzone.js with base64 encoding file
本文介绍了使用base64编码文件提交Dropzone.js的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试从dropzone.js中对base64编码文件,并使用PJAX将其发送到处理程序页面。但是我的问题是 base64_data
在POST请求中为空。
I am trying to base64 encode file from a dropzone.js and send it to a handler page using PJAX. However I have an issue with base64_data
being empty in a POST request.
$(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>
任何提示?
推荐答案
在发送pjax请求后执行延迟 handleReaderLoad
这是一个问题。工作示例:
It was an issue with deferred handleReaderLoad
being executed after the pjax request is sent. Working example:
$(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();
},
});
});
这篇关于使用base64编码文件提交Dropzone.js的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文