如何在服务器上使用 Ajax 发送没有表单的文件数据？

Question

我编写了一个 javascript 代码，可以很好地收集用户想要上传的每个文件。但是当我添加拖放文件选项时，事情发生了变化。 默认情况下，我有一个监控 input[type='file'] 更改事件处理程序的代码，一旦检测到它，就会执行操作并将文件发送到服务器进行上传。 但是由于拖放不会更改 input[type='file'] 值，并且由于安全原因我也不能以编程方式更改它，我很震惊如何发送在网站上拖放的文件。

这是我的一些代码：

document.getElementById('drop').addEventListener('drop', function (e) {
  e = e || window.event; 
  e.preventDefault();
  var dt    = e.dataTransfer;
  var files = dt.files;
  for (var i=0; i<files.length; i++) {
    var file = files[i];
    var reader = new FileReader();

    reader.readAsDataURL(file);
    addEventHandler(reader, 'loadend', function(e, file) {
    var bin           = this.result; 
    var filename       = file.name;
    var filesize  = (file.size/1048576).toFixed(2) + ' MB';
    alert(' '+filename+' '+filesize+' '); // DEBUGGING ONLY
    console.log("YEAY");
    if(filecheck(filename)) {       // Additional Function
    step2(filesize, filename, bin); // Additional Function
    $('.btn').click(function() {    // Button to be clicked to start upload
    $('#main_img_upload').submit(); // Form with that input[type='file']
    });
    }
    else {
    alert("Wrong File");
    return false;
    }
    }.bindToEventHandler(file), false);
  }
  return false;
});

显然，它开始上传，但服务器没有收到任何内容，因为没有对表单进行任何更改。但我有所有必要的详细信息（文件名、文件大小等）

任何帮助将不胜感激。

Answer 1

试试这个代码。

data.append("FileName", files[0]);

        $.ajax({
            url: "../",
            type: "POST",
            processData: false,
            contentType: false,
            data: data,
            success: function (data) {
                if (data) {

                }
            },
            error: function (er) {
                MSGBox(er);
            }

        });
    }