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

I've coded a javascript code which nicely collects every file user wants to upload. But things turned when I added drag/drop file option. By default, I had a code which monitored input[type='file'] change event handler and once it was detected, actions were performed and files were sent to server for upload. But since drag/drop doesn't change the input[type='file'] value and neither I can change it programmatically due to security reasons, I'm struck how do I send files which are dragged and dropped on the site.

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

Here's some of my code:

这是我的一些代码：

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;
});

Obviously, it starts upload but server doesn't receive anything as no change has been made to form. But I have all the necessary details (name of file, size of file, etc..)

显然，它开始上传，但服务器没有收到任何东西，因为没有形成任何变化。但我有所有必要的细节（文件名，文件大小等）。

Any help would be appreciated.

任何帮助，将不胜感激。

1 个解决方案

#1

Try out this code.

试试这段代码。

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);
            }

        });
    }