为Dropzone自动提交添加日期及下拉选框字段值

首先，我注意到你代码里有个明显的字段名不匹配问题，这大概率是额外字段没传成功的核心原因！另外，输入框移到表单内覆盖上传区域的问题，也可以通过调整Dropzone的配置轻松解决。

步骤1：修正字段名错误 #

你的脚本里写了formData.append("dateDue", $('#dueDate').val());，但对应的输入框name是dueDate，后端接收参数时会找不到dateDue这个值。把它改成formData.append("dueDate", $('#dueDate').val());就能解决这个基础问题。

步骤2：解决输入框移到表单内覆盖上传区域的问题 #

Dropzone默认会把整个<form>元素变成可点击的上传触发区，导致表单内的输入框无法正常使用。我们可以通过clickable配置项指定专门的上传区域，让输入框和上传区域各司其职。

修改后的HTML（输入框移到表单内） #

<form action="/carrier/hr/employees/show/{{$employee->id}}/uploadAttachment" class="dropzone" id="employeeAttachmentForm">
    <!-- 专门的上传触发区域，只有这个区域可点击上传 -->
    <div class="dropzone-upload-area">
        <p>拖放文件到这里，或点击上传</p>
    </div>
    <div class="dropzone-previews"></div>

    <!-- 隐藏字段 -->
    <input name="employeeID" value="{{$employee->id}}" type="hidden">
    {{ csrf_field() }}

    <!-- 表单字段，放在表单内单独容器 -->
    <div class="form-group mt-3">
        <label>Date:</label>
        <input type="date" name="date" class="form-control" id="date">
    </div>
    <div class="form-group mt-3">
        <label>Due Date:</label>
        <input type="date" name="dueDate" class="form-control" id="dueDate">
    </div>
    <div class="form-group mt-3">
        <label>Type:</label>
        <select id="type" class="form-control" name="type">
            <option>Please Select</option>
            <option value="Drivers License">Drivers License</option>
        </select>
    </div>

    <div class="fallback">
        <input name="file" type="file" multiple />
    </div>
</form>

修改后的Dropzone脚本 #

<script>
$(document).ready(function() {
    Dropzone.autoDiscover = false;

    var providerDropzone = new Dropzone("#employeeAttachmentForm", {
        paramName: 'file',
        maxFilesize: 10, // MB
        maxFiles: 20,
        acceptedFiles: ".jpeg,.jpg,.png,.gif,.pdf,.doc,.docx,.xlsx,.xls",
        // 指定仅上传区域可点击，避免输入框被当成上传触发区
        clickable: ".dropzone-upload-area",
        init: function() {
            this.on("sending", function(file, xhr, formData) {
                // 修正后的字段名，与输入框name对应
                formData.append("date", $('#date').val());
                formData.append("dueDate", $('#dueDate').val());
                formData.append("type", $('#type').val());
                
                // 调试：打印值确认是否正确获取
                console.log("Date:", $('#date').val());
                console.log("Due Date:", $('#dueDate').val());
                console.log("Type:", $('#type').val());
            });
        }
    });

    providerDropzone.on("queuecomplete", function() {
        location.reload();
    });
});
</script>

如果你不想把输入框移到表单内 #

保持原有HTML结构，只需修正字段名，并确保jQuery选择器能正确定位输入框：

<script>
$(document).ready(function() {
    Dropzone.autoDiscover = false;

    var providerDropzone = new Dropzone(".dropzone", {
        paramName: 'file',
        maxFilesize: 10, // MB
        maxFiles: 20,
        acceptedFiles: ".jpeg,.jpg,.png,.gif,.pdf,.doc,.docx,.xlsx,.xls",
        init: function() {
            this.on("sending", function(file, xhr, formData) {
                // 修正字段名
                formData.append("date", $('#date').val());
                formData.append("dueDate", $('#dueDate').val());
                formData.append("type", $('#type').val());
                
                // 确认值是否获取成功
                console.log(formData.getAll("date"));
            });
        }
    });

    providerDropzone.on("queuecomplete", function() {
        location.reload();
    });
});
</script>

额外排查点 #

• 检查jQuery是否正确加载，确保$能正常使用。
• 验证输入框的id是否和脚本里的选择器完全一致（比如有没有大小写错误）。
• 如果还是没生效，可以在init方法里加console.log("Dropzone initialized")，确认Dropzone是否正常初始化。

内容的提问来源于stack exchange，提问作者Matthew