我正在听这个drop事件并且正在e.preventDefault()尝试打开已删除的文件.它一直工作到昨天.但就在今天它因某些未知原因而破产.我做了一个JsFiddle#bwquR/10反映相同的.

编辑:

看起来如果你不采取dragover事件drop无法处理.即使在小提琴中如果你评论dragover它也行不通.
在实际工作中我错过了拼写dragover但是它仍然是一个问题,drop如果没有dragover

小提琴实际上是工作但是身体很小(只有DROP那里的文字).它drop只是在DROP文字不在整个身体上的那个小区域上进行.所以我觉得它不起作用.对困惑感到抱歉.

有兴趣使用JQuery/AJAX/PHP构建我自己的drag'n'drop文件上传器.

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

我想从头开始构建这个,而不是使用任何插件,以便我可以更好地操纵限制(文件类型,大小,目标文件夹等)

谷歌没有运气,只有插件.无论如何可以引导我朝着正确的方向前进吗？

更新 好的,所以我想出了如何做我想要的.只需将文件输入字段不透明度设置为1即可隐藏,您仍然可以将文件拖到该常规区域中,如果您点击文本字段,它将捕获它.但是,我想知道如何增加文件输入字段的高度/宽度(在文件上尝试了基本的css,但它只增加了'浏览'按钮的大小,而不是你可以将文件放入的实际字段.任何想法如何做到这一点？我基本上想要一个大的方形div,说'在这里删除文件'.所以我需要调整输入字段的大小.

我正在使用拖放式API,有两种方法可以从a收集文件DragEvent.dataTransfer,有readonly files: FileList和readonly items: DataTransferItemList.

它似乎items是超集files,收集File[]来自items更复杂,并且items在旧的IE中也不受支持,因此files更容易使用并且具有更好的支持,但是MDN上的文章items首先使用并且仅当它不受支持时才切换到files.

我的问题是,如果我只需要收集File[]收藏品DragEvent,我可以选择dataTransfer.files房产还是dataTransfer.items有一些好处,这值得吗？

自答案:

在现代浏览器(chrome)中,files集合为空.拖动的文件只能通过items,因此您不能单独依赖files.

试图在HTML5中做一个简单的拖放示例 - 但是当我将图像放入div元素时,我得到以下错误.

未捕获的TypeError:无法设置null的属性'innerHTML'

所以我假设错误消息意味着dragElement为null.我不明白为什么,因为我在dragstart事件中将它设置为img元素的HTML.

有谁知道如何使这项工作？

var dragElement = null;

$('#x').bind('dragstart', function (e) {
    dragElement = this;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.innerHTML);
});

$('#drop-box').bind('dragover', function (e) {
    e.preventDefault();
    return false;
});

$('#drop-box').bind('drop', function (e) {
    e.preventDefault();
    if (e.stopPropagation) {
        e.stopPropagation();
    }

    if (dragElement != this) {
        dragElement.innerHTML = this.innerHTML;
        this.innerHTML = e.originalEvent.dataTransfer.getData('text/html');
    }

    return false;
});

介绍：

大约在2017年3月中旬，将firefox更新到版本52之后，某些功能（拖放）便停止正常运行。正如调试显示的那样，该事件的属性“ dataTransfer”如今已设置为null。

在此更新之前，onDrop和onPaste事件都将dataTransfer属性集传递给要删除或粘贴的内容。

问题：

实际的浏览器应如何处理拖放？这些天是否需要采取任何预防措施？是否有解释当今限制性行为背后的原因？

互联网上是否有任何示例说明如何使用实际的浏览器完成任务？

我不要求在firefox版本48之前的示例，因为至少直到该版本之前，整个过程都可以正常工作。我不要求使用jQuery或任何其他库的示例（但如果它们是附加的补充，则不拒绝它们）。我确实要求使用简单的纯本地javascript示例。