Php JQuery-拖放文件-如何获取文件信息？

有兴趣使用JQuery/AJAX/PHP构建我自己的拖放文件上传程序

基本上，我想要一个文件上传器，我的网站的用户只需将文件从他们的计算机拖动到我创建的一个div中，然后它将为他们上传文件到选定的目的地

我想从头开始构建它，不使用任何插件，以便更好地处理限制（文件类型、大小、目标文件夹等）

没有运气搜索谷歌，只有插件。无论如何，你能把我引向正确的方向吗

更新 好吧，我想知道怎么做了。只需将“文件输入”字段“不透明度”设置为1，使其处于隐藏状态，您仍然可以将文件拖动到该常规区域，如果您点击文本字段，它将捕获该文件。但是，我想知道如何增加文件输入字段的高度/宽度（在文件上尝试了基本css，但它只增加了“浏览”按钮的大小，而不是可以将文件放入的实际字段。有什么办法吗？

---

我基本上想要一个大的方形div，上面写着“Drop file here”。因此我需要调整输入字段的大小。

您可以使用HTML5

dragenter

和

dragleave

事件来创建dropzone。
然后，通过将文件输入放置在dropzone中，并使用CSS隐藏它，您可以在输入的

change

事件触发时上载文件，如下所示

var dropzone = $("#dropzone"),
    input    = dropzone.find('input');

dropzone.on({
    dragenter : dragin,
    dragleave : dragout
});

input.on('change', drop);

function dragin(e) { //function for drag into element, just turns the bix X white
    $(dropzone).addClass('hover');
}

function dragout(e) { //function for dragging out of element                         
    $(dropzone).removeClass('hover');
}

function drop(e) {
    var file = this.files[0];
    $('#dropzone').removeClass('hover').addClass('dropped').find('img').remove();

    // upload file here
}

---

对于那些感兴趣的人，我发现本教程/演示非常有用：

---

基本上使用

覆盖默认输入字段。

只是在这里插话，因为我在过去几天也一直在这样做。据我所知，如果要通过jQuery绑定drop事件，您需要通过

事件.originalEvent

对象访问该

事件.dataTransfer

对象在jQuery提供的事件中

例如：

在此情况下，我绑定到

dragover

以及

drop

事件，因为这是防止它执行默认操作所必需的（在此处找到解决方案：）

$（'dropzone'）.bind（'dragover drop'，函数（事件）{
event.stopPropagation（）；
event.preventDefault（）；
如果（event.type=='drop'）{
log（event.originalEvent.dataTransfer.files）；
}
});

另外，如果

console.log（）

event.dataTransfer（或

event.originalEvent.dataTransfer

）的文件数组为空，则似乎存在一个错误，这里指出：

为了更好地回答老年退休金问题（我刚刚注意到了它的其余部分，我知道它很旧，但有些人可能会觉得这很有用）：

我的实现是在jQuery中实现的，所以我希望这样可以：

var文件=[]；
//附加到dropzone以拾取放置在其上的文件。在我的示例中，这是一个div。
$（“#dropzone”）.bind（'dragover drop'，函数（事件）{
//停止默认操作-如果不停止，它将在浏览器中打开文件
event.stopPropagation（）；
event.preventDefault（）；
如果（e.type=='drop'）{
files.push（event.originalEvent.dataTransfer.files）；
}
});
//将其附加到输入类型文件，以便它可以获取由输入选择的文件
$（“#文件输入”）.bind（'change'，函数（事件）{
文件推送（event.target.files）；
});
//这是一个链接或按钮，单击该链接或按钮将执行ajax请求
//然后上传文件
$（“#上载按钮”）.bind（'click'，函数（事件）{
//停止默认操作
event.stopPropagation（）；
event.preventDefault（）；
如果（files.length==0）{
//如果单击“上载”时“队列”中没有文件，请处理您希望发生的事情
返回；
}
var formData=new formData（）；
$.each（文件、函数（键、值）{
formData.append（键、值）；
});
$.ajax({
url:“上传ajax”，
键入：“POST”，
数据：formData，
cache:false，
数据类型：“json”，
processData:false，//不处理文件-我实际上从SO帖子中得到了这个和下一个，但我不记得在哪里
contentType:false，//将content-type设置为false，因为jQuery将告诉服务器它的查询字符串请求
success：函数（data，textStatus，jqXHR）{/*句柄success*/}，
错误：函数（jqXHR、textStatus、errorshown）{/*句柄错误*/}
});
});

您还可以绑定到已接受答案中的其他事件，以执行诸如使dropzone淡入等效果，以便您可以看到它（这在我的库的todo列表中）。然而，这是我使用的实际ajax文件上载的核心

---

我真的没有一种方便的方法来测试它，但本质上我就是这样做的（我基本上从我一直在制作的库中提取了所有代码，并以一种易于理解的方式对其进行了修改，以适合这里的通用代码块）。希望这能帮助一些人。从这里开始，添加文件队列列表真的很容易，可以从队列中删除文件，所以这应该是一个很好的起点。

我认为只有支持HTML5的浏览器才能允许您这样做。但我不是100%确定。您可以做一些准备使用本机javascript通过drag-n-drop实现酷炫的功能，例如（从网站）拖动托管图像并将其放置在具有drop事件的div上，然后获取图像的路径并创建一个以该路径为源的图像元素。但是，从桌面拖动图像完全是另一回事，很可能会被阻止。@CMS-似乎是这样，我已经更新了答案，不依赖外部脚本文件/网站。