使用 dropzone 和其他表单字段使用 FormValidation 插件上传多个文件

Question

这是我在项目中设计的表单图像现在我的要求是通过单个后端调用上传多个文件和其他表单值。

<script>
<form class="form-horizontal" name="addColorForm" id="addColorForm"
                          enctype="multipart/form-data"
                          method="POST">
  //Colour Name and Code fileds
  //Files Uploader Plugin  (Dropzone)
 <input type="file" name="artworkFiles[]" style="visibility: hidden"/>
</form>

现在我的脚本部分

 <script>
    var validCode = function () { // my custom validation };
        FormValidation.validators.validCode = validCode;
        FormValidation.formValidation(
            document.getElementById('addColorForm'),
            {
                fields: {
                    colorName: {
                        validators: {
                            notEmpty: {
                                message: '${message(code:"blank.error.message", default:"This field must be entered")}'
                            },
                        }
                    },
                  },
                plugins: { //Learn more: https://formvalidation.io/guide/plugins
                    trigger: new FormValidation.plugins.Trigger(),
                    // Bootstrap Framework Integration
                    bootstrap: new FormValidation.plugins.Bootstrap(),
                    // Validate fields when clicking the Submit button
                    submitButton: new FormValidation.plugins.SubmitButton(),
                    // Submit the form when all fields are valid
                    // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
                }
            }
        ).on('core.form.valid', function () {
            saveColor();
        });
    
        function saveColor() {
            var url = "url";
            var form = $("#createArtworkForm");
            var formData = new FormData(form[0]);
            $.ajax({
                url: url,
                type: 'POST',
                enctype: 'multipart/form-data',
                data: formData,
                success: function (data) {},
                cache: false,
                contentType: false,
                processData: false,
                error: function () { }
            });
        }

   var artworkColorsFiles = $('#kt_dropzone').dropzone({
    url: "https://www.google.com", // Set the url for your upload script location
    paramName: "media", // The name that will be used to transfer the file
    maxFiles: 1,
    maxFilesize: 40, // MB
    addRemoveLinks: true,
    acceptedFiles: "image/*",
    autoProcessQueue: false,
    accept: function (file) {
        //Logic to add multiple files in an input type hidden which is declared above
        let fileReader = new FileReader();

        fileReader.readAsDataURL(file);
        fileReader.onloadend = function () {

            let content = fileReader.result;
            $('#artworkFiles').val(content);
            file.previewElement.classList.add("dz-success");
        }
        file.previewElement.classList.add("dz-complete");
    }
 
});

</script>

我的问题是如何实现这一点，或者我应该如何在声明为可见性隐藏的输入类型文件字段中添加我的所有文件（最多 3 个）。

Answer 1

我在我的项目中所做的同样是代码，希望它能帮助你。 您必须使用悬浮窗功能于sendingmultiple函数发送文件，表单数据你必须通过你FORMDATA添加循环

var data = $("form#OpportunityForm").serializeArray();
                $.each(data, function (key, el) {
                        .append(el.name, el.value);
                });

 $(document).ready(function () { zdrop = new Dropzone('#dropzone', { url: '@Url.Action("SaveOpportunity", "Masters")', maxFiles: 500, maxFilesize: 300, parallelUploads: 100, addRemoveLinks: true, autoProcessQueue: false, uploadMultiple: true, removeFilePromise: function () { return new Promise((resolve, reject) => { let rand = Math.floor(Math.random() * 3) console.log(rand); if (rand == 0) reject('didnt remove properly'); if (rand > 0) resolve(); }); }, sendingmultiple: function (file, xhr, formData) { var data = $("form#OpportunityForm").serializeArray(); $.each(data, function (key, el) { .append(el.name, el.value); }); debugger $("form#OpportunityForm").find("input[type=file]").each(function (index, field) { const file = field.files[0]; formData.append('itemfile', file); }); }, successmultiple: function (file, responseText) { jQuery('form#OpportunityForm').find('textarea, input').each(function () { jQuery(this).val(''); }); clear(); swal.fire("Opportunity Details Saved!", "Opportunity details Saved Successfully!", "success"); OpportunityMstList(); GetOpportunityMstList(); location.reload(); $("#myModal").modal('hide'); }, });