使用 Dropzone javascript 框架上传文件时传递额外的文本字段值
passing an additional textfield value when uploading files using Dropzone javascript framework
您好,我开发了一个使用 Dropzone javascript 框架上传图片的网页。
我可以正常工作,但我还打算在上传此文件时发送一些额外的文本字段数据。
我做了一些检查,发现下面这个 link 堆栈溢出,但似乎没有用
所以我决定 post 我所做的事情,希望其他人可以更正我的代码以帮助我使它工作
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.js"></script>
</head>
<form id="my-form" name="wle">
<input type="hidden" value="wole" id="collect" name="collect" />
<div class="dropzone"></div>
<button id="startUpload">Upload</button>
</form>
<script>
Dropzone.autoDiscover = false;
$(document).ready(function () {
var myDropzone = new Dropzone(".dropzone", {
init: function () {
$('#startUpload').click(function () {
myDropzone.processQueue();
});
},
url: "upload.php",
type: 'POST',
autoProcessQueue: false,
maxFilesize: 20,
paramName: "file",
maxFiles: 5,
addRemoveLinks: true,
acceptedFiles: ".jpg,.JPG.jpeg,.JPEG,.PNG,.png,.gif",
//send all the form data along with the files:
success: function () {
//do stuff
},
error: function () {
//do error notification
}
});
});
</script>
以上代码可以上传文件,
但后来我尝试传递一个额外的数据字段,我需要使用它保存在数据库中
this.on("sendingmultiple", function(data, xhr, formData) {
formData.append("collect", jQuery("#collect").val());
});
但是 Dropzone 元素停止工作
为了说唱这一切,我正在尝试上传文件并同时提交文本数据。
请帮忙
经过更多的研究工作,我找到了解决问题的方法
有一个函数允许发送更多的参数
myDropzone.on("sending", function(file, xhr, formData) {
// Will send the filesize along with the file as POST data.
formData.append("filesize", file.size);
});
在下方找到
https://www.dropzonejs.com/#tips
您好,我开发了一个使用 Dropzone javascript 框架上传图片的网页。
我可以正常工作,但我还打算在上传此文件时发送一些额外的文本字段数据。
我做了一些检查,发现下面这个 link 堆栈溢出,但似乎没有用
所以我决定 post 我所做的事情,希望其他人可以更正我的代码以帮助我使它工作
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.js"></script>
</head>
<form id="my-form" name="wle">
<input type="hidden" value="wole" id="collect" name="collect" />
<div class="dropzone"></div>
<button id="startUpload">Upload</button>
</form>
<script>
Dropzone.autoDiscover = false;
$(document).ready(function () {
var myDropzone = new Dropzone(".dropzone", {
init: function () {
$('#startUpload').click(function () {
myDropzone.processQueue();
});
},
url: "upload.php",
type: 'POST',
autoProcessQueue: false,
maxFilesize: 20,
paramName: "file",
maxFiles: 5,
addRemoveLinks: true,
acceptedFiles: ".jpg,.JPG.jpeg,.JPEG,.PNG,.png,.gif",
//send all the form data along with the files:
success: function () {
//do stuff
},
error: function () {
//do error notification
}
});
});
</script>
以上代码可以上传文件,
但后来我尝试传递一个额外的数据字段,我需要使用它保存在数据库中
this.on("sendingmultiple", function(data, xhr, formData) {
formData.append("collect", jQuery("#collect").val());
});
但是 Dropzone 元素停止工作
为了说唱这一切,我正在尝试上传文件并同时提交文本数据。
请帮忙
经过更多的研究工作,我找到了解决问题的方法
有一个函数允许发送更多的参数
myDropzone.on("sending", function(file, xhr, formData) {
// Will send the filesize along with the file as POST data.
formData.append("filesize", file.size);
});
在下方找到
https://www.dropzonejs.com/#tips