Question

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

我想知道是否向您展示我的网站：D

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

我应该将fd作为参数传递吗？ o.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

Answer 1

我认为你对变量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);
}

This article更好地解释了javascript中的变量范围。

Answer 2

我在这里看到的代码中最直接的问题，就是在控制台中触发错误的原因是你在onReady事件处理程序中定义了变量fd。因此，变量超出了函数DragAndDropUpload的范围。

解决方法是将fd作为参数传递给DragAndDropUploader。为此，在定义函数时，您将要创建一个传递给函数的参数或变量，该函数可以在函数内部使用。

尝试定义DragAndDropUpload，如下所示：

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

然后，您可以从任何有权访问fd变量的函数调用该函数（在本例中，我假设是onReady事件侦听器），并将变量fd传递给它。然后DragAndDropUpload可以使用该变量，无论它需要什么！

此外，您可能希望考虑使用JSFiddle或CodePen提供项目示例，以便人们以更具互动性和完整性的状态查看您的代码。

拖放上传

2 个答案: