Question

我的目标是将文件传递给在laravel上运行的后端。该文件在网页上拖放而不是我的input file。我经历了堆栈溢出的先前问题，并相应地修复了我的代码，但问题仍然存在。

这是我的javascript代码，它使用ajax传递文件

$("html").on("drop", function (e) {
    e.preventDefault();
    e.stopPropagation();

    var dt = e.dataTransfer || (e.originalEvent && e.originalEvent.dataTransfer);
    var files = e.target.files || (dt && dt.files);

    if (files) {
        for (var i = 0; i < e.originalEvent.dataTransfer.files.length; i++) {
            var file_ext = e.originalEvent.dataTransfer.files[i].name.split('.').pop();
            console.log(file_ext);

            if ((file_ext == 'pdf') || (file_ext == 'docx') || (file_ext == 'txt')) {
                console.log('right file');

                var resume = e.originalEvent.dataTransfer.files[i].value;
                var form_data = new FormData();
                form_data.append("resume", resume);
                var resume_val = e.originalEvent.dataTransfer.files[i].name;
                console.log(form_data);

                var token = $('#token').val()
                var hello = "hello";

                $.ajax({
                    url: '/resume_upload',
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: ({
                        resume: form_data,
                        wish: "Naveen its working"
                    }),
                    success: function (data) {
                        console.log(data.msg);
                        alert(data.msg);
                    },
                    error: function (xhr, status, error) {
                        console.log(error);
                        alert(error)
                    }
                });
            } else {
                console.log('wrong file');
            }
        }
    } else {
        console.log('file not recieved');
    }
});

这是我获取文件的地方

var resume = e.originalEvent.dataTransfer.files[i].value;
var form_data = new FormData();
form_data.append("resume",resume);

但是当我console.log(form_data)时，它只记录了 FormData {} 空表单数据。所以很明显我没有通过我的ajax功能。我在获取文件时做错了什么？我不知道如何解决这个问题。

Answer 1

也许我误解了你想要什么，但我认为你应该这样做：

var form_data = new FormData();
form_data.append('resume_file_name', e.originalEvent.dataTransfer.files[i].value);
form_data.append('resume_file', e.originalEvent.dataTransfer.files[i]);
form_data.append('wish', "Naveen its working");

如果你想上传文件，而不只是上传一些文件信息

并使用FormData，您可以传递所需的所有数据，因此只需将其传递给$.ajax数据参数：

data: form_data,

还有别的东西，这可能是原来的问题：
当jQuery处理参数时，它也会尝试转换它，但这会导致问题，当将FormData类型传递给data属性时，您还应该将这些参数添加到$.ajax输入对象中：

processData: false,
contentType: false

参数。

抱歉我的英文不好！

TypeError：通过ajax传递文件时的非法invocationType

1 个答案: