使用 dropzone.js 提交额外的表单数据答案

【问题标题】：submit additional form data with dropzone.js使用 dropzone.js 提交额外的表单数据
【发布时间】：2021-06-15 14:57:05
【问题描述】：

我有以下代码可以完美运行以上传多张图片，但我需要通过使用纯 js 的表单发送一些额外的数据。怎么做？我还需要在提交时发布其他参数，这些参数将使用 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>

【问题讨论】：

标签： jquery dropzone.js

【解决方案1】：

将其添加到初始化中

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);
         });
     }
 });

【讨论】：