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

Question

我编写了一个javascript代码，可以很好地收集用户想要上传的每个文件。 但是当我添加拖放文件选项时，事情就转了。 默认情况下，我有一个监视输入[t​​ype ='file']更改事件处理程序的代码，一旦检测到，就执行了操作并将文件发送到服务器进行上载。 但由于拖放不会改变输入[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);
            }

        });
    }