不带ajax的jquery拖放文件答案

【问题标题】：Jquery drag n drop files without ajax不带ajax的jquery拖放文件
【发布时间】：2022-01-12 11:26:31
【问题描述】：

我制作了一个用于拖放文件并在提交时上传的脚本，这要归功于 Ajax，但我希望它不使用 ajax，因此不使用 e.preventDefault(); 就像一个普通的帖子表单......我应该如何编辑它？

    form.submit(function (e) {
        e.preventDefault();

        let formData = new FormData(this);
        
        for (let i = 0; i < filesLoader.length; i++) {
            formData.append(filesLoader[i][0], filesLoader[i][1])
        }

        $.ajax({
            type: form.attr('method'),
            url: form.attr('action'),
            data: formData,
            enctype: 'multipart/form-data',
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                console.log("Success")
            },
            error: function (data) {
                console.log("error")
            },
        });
    });

【问题讨论】：

因此，您想在提交表单时发出 POST 请求，因为现在被拖放的文件不是表单的一部分。为了使它们成为请求的一部分，您现在将文件添加到 formdata 对象并使用 AJAX 进行发布。但是您想避免 AJAX 并像没有 JavaScript 一样发布表单（并且仍然添加文件）？

标签： javascript jquery form-data

【解决方案1】：

找到解决方案，在 Drop 功能上，我也使用 fileField.prop("files", e.originalEvent.dataTransfer.files); 更改输入字段感谢这适用于正常提交或通过 ajax

        dndFileArea.on('drop', function (e) {

            let file = e.originalEvent.dataTransfer.files;
            fileField.prop("files", e.originalEvent.dataTransfer.files);
            filesLoader.push([fileField.attr("name"), file[0]]);

【讨论】：