经过几个小时的搜索我的问题的答案，我终于决定过来。
以下是问题：
我有一个非常简单的页面，其中包含input = file。以及用于显示图像的区域。
另一方面，我有一个Jquery / javascript脚本，它加载文件并使用onChange方法将其放入div中。
两种可能性：用户在文件资源管理器中选择图像，然后单击“确定”。或者他通过单击取消或关闭来离开文件窗口而不加载任何文件。
在这种情况下，一切都很好
但是用户也可以尝试将文件从文件窗口拖到div。但我不希望他这样做，我知道如何防止这种情况发生。 （请看下面的代码）
并且它有效，没有任何内容输入div，浏览器不会在新页面上重定向。
Firefox和Internet Explorer没有必要，只有chrome可以从浏览器的实习文件浏览器中拖动。
在此之前，它没问题。
拖动但如果用户尝试离开文件窗口（通过单击取消/关闭或加载新文件），则chrome完全崩溃。 （它不会每次都崩溃，但是3次测试都不会崩溃）并且到目前为止：唯一可能的情况是强制浏览器关闭
我真的不明白为什么：/
我尝试了一切来解决console.log发生问题的地方..但是在崩溃之前没有发生任何事情。不是来自.js的onchange（）事件......
我也尝试用小文件来做，结果是一样的。
我认为该错误来自Chrome浏览器，但我仍然无法通过这种方式访问我的网站，我真的需要您的帮助。
我的想法是：
在用户尝试拖动某些内容后关闭文件窗口，但在javascript中似乎无法关闭我们自己没有打开的内容
无法从浏览器的文件窗口移动或拖动任何文件。就像在Firefox和Internet Explorer中一样
或者只是找到崩溃的原因但似乎无法实现.. Console.log没有发出消息。它只是崩溃..
我希望你能比我更好地处理它。我真的需要帮助，
此致
代码：
jQuery(document).ready(function($) {
var loadFichier = $('#professionnal-icones-pictures-add'),
contenerImages = $('#imagesPro');
loadFichier.on('change', function(event) {
console.log("change");
event = event || window.event;
var fichierLoad = loadFichier[0].files[0],
output = document.getElementById('output1');
if (output.src == "") {
if (event.target.files[0]) {
var url = URL.createObjectURL(event.target.files[0]);
output.src = url;
}
}
});
window.addEventListener("dragover", function(e) {
e = e || event;
e.preventDefault();
e.stopPropagation();
}, false);
window.addEventListener("drop", function(e) {
e = e || event;
e.preventDefault();
e.stopPropagation();
}, false);
contenerImages.on(
'dragover',
function(e) {
e = e || window.event;
e.preventDefault();
e.stopPropagation();
}
)
contenerImages.on(
'dragenter',
function(e) {
e = e || window.event;
e.preventDefault();
e.stopPropagation();
}
)
contenerImages.on(
'drop',
function(e) {
e = e || window.event;
if (e.originalEvent.dataTransfer) {
if (e.originalEvent.dataTransfer.files.length) {
e.preventDefault();
e.stopPropagation();
}
}
}
);
});<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/sitePerso/vue/profil/style-profil.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="professional-get-pictures">
<div id="contener-selection">
<div id="imagesPro">
<div>
<img id='output1' />
</div>
</div>
<div id="contener-icones-pictures">
<input id="professionnal-icones-pictures-add" type="file" accept="image/*">
</div>
</div>
</div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="profiltest.js"></script>
</body>
</html>
答案 0 :(得分：1)
我真的很惊讶这个问题引发了任何评论。在许多带有chrome的网站上，这种崩溃仍然存在。
尽管如此，我终于找到了一种方法来解决这个问题。它没有告诉我为什么它会崩溃（如果你们其中一个人知道，我会很高兴听到它）。但是它可以防止浏览器崩溃，并且对用户来说仍然保持舒适。
我添加了这两行，这样，用户实际上无法从文件资源管理器中拖放任何内容：
var dt = e.originalEvent.dataTransfer;
dt.effectAllowed = dt.dropEffect = 'none';
所以这个：
contenerImages.on(
'dragover',
function(e) {
e= e|| window.event;
e.preventDefault();
e.stopPropagation();
}
)
$(window).on(
'dragover',
function(e) {
e= e|| window.event;
e.preventDefault();
e.stopPropagation();
}
)
成为这个：
contenerImages.on(
'dragover',
function(e) {
e= e|| window.event;
e.preventDefault();
e.stopPropagation();
var dt = e.originalEvent.dataTransfer;
dt.effectAllowed = dt.dropEffect = 'none';
}
)
$(window).on(
'dragover',
function(e) {
e= e|| window.event;
e.preventDefault();
e.stopPropagation();
var dt = e.originalEvent.dataTransfer;
dt.effectAllowed = dt.dropEffect = 'none';
}
)
也许有人找到了更好的答案，但我希望这篇文章可以帮助很多人。
唯一的问题是：它也阻止用户从文件浏览器中拖动（而不仅仅是从浏览器的文件窗口）。但我想你会找到一种方法来处理它。
我只是为将来的读者做一个问题的总结：当我从浏览器的内部文件窗口（只有chrome）拖动文件，然后尝试关闭它时：它经常将这个文件带到碰撞
每个人都过得愉快：）