使用输入[type=file]/拖放javascript jquery在chrome中崩溃

经过几个小时的寻找我的问题的答案，我终于决定来找你

问题出在这里：

我有一个非常简单的页面，输入=文件。以及用于显示加载的图像的区域

另一方面，我有一个Jquery/javascript脚本，它加载文件并使用onChange方法将其放入div中

两种可能性：用户在文件资源管理器中选择图像，然后单击“确定”。或者他通过单击“取消”或“关闭”离开“文件”窗口而不加载任何文件

在这种情况下，一切都很好

但是用户也可以尝试将文件从文件窗口拖到div。但是我不希望他这样做，我知道如何防止这种情况。（请看下面的代码）

它可以工作，div中没有输入任何内容，浏览器也不会在新页面上重定向

Firefox和internet Explorer不需要它，只有chrome允许从浏览器的intern file Explorer中拖动

在这之前，一切都很好。

但是拖动后，如果用户试图离开“文件”窗口（通过单击“取消/关闭”或加载新文件），则chrome将完全崩溃。（它不是每次都崩溃，但3次测试都会崩溃1次）到目前为止：剩下的唯一可能性是强制浏览器关闭

我真的不明白为什么：/

我尽了一切努力来找出console.log出现问题的地方。。但坠机前什么都没发生。不是.js中的onchange（）事件

我也试着用小文件来做，结果是一样的

我认为这个bug来自Chrome浏览器，但我不能让我的网站这样，我真的需要你的帮助

我的想法是：

• 在用户试图拖动某些内容后关闭文件窗口，但在javascript中似乎无法关闭我们自己没有打开的内容

• 无法从浏览器的“文件”窗口中移动或拖动任何文件。就像在Firefox和Internet Explorer中一样

• 或者只是找到坠机的原因，但似乎不可能实现。。Console.log未发出任何消息。它只是崩溃了

我希望你能比我处理得更好。我真的需要帮助

问候

代码：

jQuery（文档）.ready（函数（$）{
var loadFichier=$（“#专业图标图片添加”），
contenerImages=$（“#imagesPro”）；
loadFichier.on（'change'，函数（事件）{
控制台日志（“更改”）；
event=event | | window.event；
var fichierLoad=loadFichier[0]。文件[0]，
output=document.getElementById（'output1'）；
如果（output.src==“”）{
if（event.target.files[0]）{
var url=url.createObjectURL（event.target.files[0]）；
output.src=url；
}
}
});
window.addEventListener（“dragover”，函数（e）{
e=e | |事件；
e、 预防默认值（）；
e、 停止传播（）；
}，假）；
window.addEventListener（“drop”，函数（e）{
e=e | |事件；
e、 预防默认值（）；
e、 停止传播（）；
}，假）；
康特内隆(
“德拉戈弗”，
职能（e）{
e=e | | window.event；
e、 预防默认值（）；
e、 停止传播（）；
}
)
康特内隆(
“dragenter”，
职能（e）{
e=e | | window.event；
e、 预防默认值（）；
e、 停止传播（）；
}
)
康特内隆(
"放下",，
职能（e）{
e=e | | window.event；
if（如原始事件数据传输）{
if（例如originalEvent.dataTransfer.files.length）{
e、 预防默认值（）；
e、 停止传播（）；
}
}
}
);
});
我真的很惊讶这个问题会引起任何评论。如此多的chrome网站仍在发生这种崩溃

不过，我终于找到了解决这个问题的方法。它没有告诉我为什么它会在chrome上崩溃（如果你们中有人知道，我会很高兴听到）。但它可以防止浏览器崩溃，并且仍然让用户感到舒适

我添加了这两行，通过这种方式，用户确实无法从文件资源管理器中拖放任何内容：

var dt=e.originalEvent.dataTransfer；
dt.effectAllowed=dt.dropEffect='none'；

因此：

contenerImages.on(
“德拉戈弗”，
职能（e）{
e=e | | window.event；
e、 预防默认值（）；
e、 停止传播（）；
}
)
$（窗口）(
“德拉戈弗”，
职能（e）{
e=e | | window.event；
e、 预防默认值（）；
e、 停止传播（）；
}
)

变成这样：

contenerImages.on(
“德拉戈弗”，
职能（e）{
e=e | | window.event；
e、 预防默认值（）；
e、 停止传播（）；
var dt=e.originalEvent.dataTransfer；
dt.effectAllowed=dt.dropEffect='none'；
}
)
$（窗口）(
“德拉戈弗”，
职能（e）{
e=e | | window.event；
e、 预防默认值（）；
e、 停止传播（）；
var dt=e.originalEvent.dataTransfer；
dt.effectAllowed=dt.dropEffect='none'；
}
)

也许有人找到了更好的答案，但我希望这篇文章能帮助很多人

唯一的问题是：它还阻止用户从文件资源管理器（而不仅仅是从浏览器的文件窗口）中拖动。但我想你会找到解决办法的

我只是为将来的读者总结一下这个问题：当我从浏览器的内部文件窗口（只有chrome）拖动文件，然后试图关闭它时：它经常使这个文件崩溃

祝大家过得愉快：）