0

我在这里写下我的问题，因为我没有找到任何解决方案:(

我编写此代码以在我的页面上创建一个 UPLOAD DIV：

JS Fiddle 我的代码 代码：

$(document).on('dragover dragleave dragenter', '#drop-files', function(e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
});

$(document).on('drop', '#drop-files', function(e) {
    if (e.originalEvent.dataTransfer) {
        if (e.originalEvent.dataTransfer.files.length) {
            e.preventDefault();
            e.stopPropagation();
            if (e.originalEvent.dataTransfer.files.length <= 3) {
                var files = e.originalEvent.dataTransfer.files;
                                                  $.each(files, function(index, file) {
                        if (!!window.FileReader) {
....

它在带有 CHROME、FIREFOX 和 IE10 的 FIDDLE 上运行良好。因为所有都是同时加载的。

但是，如果“drop-files” DIV 在 AJAX 中加载到页面之后，在正文和他的 JS 文件之后，它在 Firefox 和 IE 上不起作用，只能在 Chrome 上正常工作。我不明白为什么？因为我使用$(document)on('drop' ... 使其正常工作:(

在 CHROME 上，它会用文件数提醒我……在 FIREFOX 和 IE10 上，它会在浏览器上打开文件:(

请问有人有解决方案吗？非常感谢

4

2 回答 2

1

最后我在第一篇文章中发布的代码工作正常。

只需在 Firefox 之前添加此行：

jQuery.event.props.push('dataTransfer');

追加 DIV 后，“drop”事件在 DOM 上运行良好......

如果您像我一样制作 Ajax，则必须使用$(document).on('drop', .... 如果在脚本之前附加 DIV，则可以正常使用$('#DIV').drop(....

与事件列表和兼容性的良好链接： http ://www.quirksmode.org/dom/events/#t18

于 2013-09-05T06:26:47.970 回答
0

最后，唯一可以正常工作的解决方案是在页面加载时加载“document.on（drop”。DIV是否已经存在并不重要......但必须先加载脚本。当你将追加DRAG N DROP 的 DIV 可以正常工作。

但我再说一遍，它在 CHROME 上运行良好！此技巧仅适用于 FireFox 和 IE10 ！IE9 不理解文件 Drag'n Drop ...

我希望有一天这个问题会被 Explorer 解决......就像 AJAX 登录表单上的密码保存最终将在下一个 FF 和 CHROME 版本中得到修复......它已经在 IE 上运行了：p

于 2013-05-03T09:35:45.903 回答