Javascript 拖放式上载

我想做拖放上传。用户将文件放在div上，当他单击upload按钮时，文件被发送到服务器。 javascript不幸地不知道变量fd是什么。如何将该变量传递给DragAndDropUpload（）函数。。不确定这是否是真正的问题

我想知道是否给你看我的网站：D

这是我的代码（只有重要的东西，我删除了其他东西以使代码看起来更小）

我应该将fd作为参数传递给函数吗？o、 还是什么

$(document).ready(function(){
    var fd;
    var drag_area = $("#drag_and_drop_div");

    drag_area.on('drop', function(e){
        e.preventDefault();
        $("#nahraj_button").show();
        $("#upload_button").attr('onclick','DragAndDropUpload()');
        var files = e.originalEvent.dataTransfer.files; 
        fd = new FormData();
        fd.append('file[]',files[0]);
    });
});

function DragAndDropUpload(){
    var request = new XMLHttpRequest();
    request.open('POST', 'uploader.php');
    request.send(fd);
}

---

编辑：控制台显示：未捕获引用错误：未定义fd

我认为您对变量的范围有问题

fd

。您可以在

$（document.ready（function（）{}）的范围内定义它

之后，希望在函数内部设置它

DragAndDropUpload（）

。这是行不通的。您应该在函数中传递它

你也把你的事情搞混了。当用户删除某些内容时，可以定义一个事件侦听器（用于单击）。你应该在外面做

我不知道你的代码的其余部分是否正常，因为你没有包括回答这个问题所需要知道的一切。始终准确说出您使用的插件和第三方脚本

如果您想显示一些内容，但不想显示您的网站，请使用jsfiddle或codepen

$(document).ready(function(){

  // Document is ready, no user action yet
  var fd; // the fd variable sits inside the $(document).ready(function(){}) scope
  var drag_area = $("#drag_and_drop_div");

  drag_area.on('drop', function(e){
    e.preventDefault();
    $("#nahraj_button").show();
    var files = e.originalEvent.dataTransfer.files; 
    fd = new FormData();
    fd.append('file[]',files[0]); 
  });

  $("#upload_button").attr('onclick', function() {
    // now call you function and pass the form data as an argument
    DragAndDropUpload(fd);
  });

});

function DragAndDropUpload(data)
{
  var request = new XMLHttpRequest();
  request.open('POST', 'uploader.php');
  request.send(data);
}

---

更好地解释javascript中的变量作用域。

我在这里看到的代码最直接的问题是，在控制台中触发错误的是，在onReady事件处理程序中定义变量

fd

。因此，变量超出函数DragAndDropUpload的范围

解决方法是将

fd

作为参数传递给

dragandropuploader

。要做到这一点，您需要创建一个参数，或传递给函数的变量，在定义函数时可以在函数内部使用

尝试定义DragAndDropUpload，如下所示：

function DragAndDropUpload(fd) { 
    //Your code here. 
}

然后，您可以从任何可以访问fd变量（在本例中，我假设它是onReady事件侦听器）的函数调用该函数，并将变量fd传递给它。DragAndDropUpload将能够使用该变量执行任何需要的操作

此外，在将来，您可能需要考虑提供一个使用或使您的代码在更交互式和完整状态下看到您的代码的示例。p>