正在提交带有base64编码文件的Dropzone.js
Submitting Dropzone.js with base64 encoding file
我正在尝试从dropzone.js对文件进行base64编码,并使用PJAX将其发送到处理程序页面。但是,我有一个问题,在POST请求中base64_data
为空。
$(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
是一个问题。工作示例:
$(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();
},
});
});
相关文章:
- 正在使用Dropzone.js删除服务器上已重命名的文件
- dropzone-使预览文件可点击
- Laravel&Dropzone.js文件请求
- Dropzone最大文件大小超过事件
- 如何禁用dropzone's自动上传文件
- 如何在dropzone.js中获取选定的文件路径
- Dropzone.js-上传文件夹结构和单个文件
- 在使用Dropzone.js添加文件之前,是否可以有弹出选项
- 使用dropzone上传文件后显示成功消息
- Dropzone.js没有将图像上传到文件夹
- 使用Fluentlenium在dropzone.js中上传文件
- 正在提交带有base64编码文件的Dropzone.js
- 如何允许Dropzone.js失败后重新提交文件上传
- Dropzone-自动删除未接受文件的缩略图
- 如何让 Dropzone.js 仅在单击提交按钮时上传文件
- 如何在Angularjs中使用Dropzone显示已经存储在服务器上的文件
- Dropzone.js :在 php-webdriver 集成测试中上传文件而不带浏览对话框
- 重命名上传的文件,以便可以将其删除 DropZone.js
- 如何从Dropzone上传和删除文件.js
- Dropzone.js:自定义文件浏览器 - 添加已上传的文件