使用 dropzone.js 提交额外的表单数据
submit additional form data with dropzone.js
我有以下代码可以完美地上传多张图片,但我需要使用普通 js 通过表单发送一些额外的数据。怎么做?
我还需要 post 提交的附加参数,这将使用 javascript 方式提取数据:document.getElementById("someid").value;
<div class="container">
<div id="msg"><?php echo isset($msg)?$msg:''; ?></div>
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<div class="dropzone dz-clickable" id="myDrop">
<div class="dz-default dz-message" data-dz-message="">
<span>Drop files here to upload</span>
</div>
<input type="text" name="somename" value="this is input data" />
<!-- data like this -->
</div>
</div>
<div class="form-group">
<button type="submit" id="add_file" class="btn btn-primary" name="submit"><i class="fa fa-upload"></i> Upload File(s)</button>
</div>
</div>
</div>
</div>
<!--Only these JS files are necessary-->
<script src="dropzone/dropzone.js"></script>
<script>
//Dropzone script
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#myDrop",
{
paramName: "__files", // The name that will be used to transfer the file
addRemoveLinks: true,
uploadMultiple: true,
withCredentials: true,
autoProcessQueue: false,
parallelUploads: 50,
maxFilesize: 20, // MB
acceptedFiles: ".png, .jpeg, .jpg, .gif",
url: "ajax/process.php",
});
/* Add Files Script*/
myDropzone.on("success", function(file, message){
$("#msg").html(message);
//setTimeout(function(){window.location.href="index.php"},800);
});
myDropzone.on("error", function (data) {
$("#msg").html('<div class="alert alert-danger">There is some thing wrong, Please try again!</div>');
});
myDropzone.on("complete", function(file) {
myDropzone.removeFile(file);
});
$("#add_file").on("click",function (){
myDropzone.processQueue();
});
</script>
将其添加到初始化
var myDropzone = new Dropzone("div#myDrop",
{
paramName: "__files", // The name that will be used to transfer the file
addRemoveLinks: true,
uploadMultiple: true,
withCredentials: true,
autoProcessQueue: false,
parallelUploads: 50,
maxFilesize: 20, // MB
acceptedFiles: ".png, .jpeg, .jpg, .gif",
url: "ajax/process.php",
init: function () {
this.on('sending', function(file, xhr, formData) {
// Append all form inputs to the formData Dropzone will POST
var info = document.getElementById("someid").value;
formData.append('info', info);
});
}
});
我有以下代码可以完美地上传多张图片,但我需要使用普通 js 通过表单发送一些额外的数据。怎么做? 我还需要 post 提交的附加参数,这将使用 javascript 方式提取数据:document.getElementById("someid").value;
<div class="container">
<div id="msg"><?php echo isset($msg)?$msg:''; ?></div>
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<div class="dropzone dz-clickable" id="myDrop">
<div class="dz-default dz-message" data-dz-message="">
<span>Drop files here to upload</span>
</div>
<input type="text" name="somename" value="this is input data" />
<!-- data like this -->
</div>
</div>
<div class="form-group">
<button type="submit" id="add_file" class="btn btn-primary" name="submit"><i class="fa fa-upload"></i> Upload File(s)</button>
</div>
</div>
</div>
</div>
<!--Only these JS files are necessary-->
<script src="dropzone/dropzone.js"></script>
<script>
//Dropzone script
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#myDrop",
{
paramName: "__files", // The name that will be used to transfer the file
addRemoveLinks: true,
uploadMultiple: true,
withCredentials: true,
autoProcessQueue: false,
parallelUploads: 50,
maxFilesize: 20, // MB
acceptedFiles: ".png, .jpeg, .jpg, .gif",
url: "ajax/process.php",
});
/* Add Files Script*/
myDropzone.on("success", function(file, message){
$("#msg").html(message);
//setTimeout(function(){window.location.href="index.php"},800);
});
myDropzone.on("error", function (data) {
$("#msg").html('<div class="alert alert-danger">There is some thing wrong, Please try again!</div>');
});
myDropzone.on("complete", function(file) {
myDropzone.removeFile(file);
});
$("#add_file").on("click",function (){
myDropzone.processQueue();
});
</script>
将其添加到初始化
var myDropzone = new Dropzone("div#myDrop",
{
paramName: "__files", // The name that will be used to transfer the file
addRemoveLinks: true,
uploadMultiple: true,
withCredentials: true,
autoProcessQueue: false,
parallelUploads: 50,
maxFilesize: 20, // MB
acceptedFiles: ".png, .jpeg, .jpg, .gif",
url: "ajax/process.php",
init: function () {
this.on('sending', function(file, xhr, formData) {
// Append all form inputs to the formData Dropzone will POST
var info = document.getElementById("someid").value;
formData.append('info', info);
});
}
});