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

Question

经过数小时搜索我的问题的答案后，我终于决定来找你。

问题是：

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

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

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

在这种情况下一切都很好

BUT 用户也可以尝试将文件从文件 window 拖到 div。但我不想让他那样做，我知道如何防止这种情况发生。（看下面的代码）

它有效，div 中没有输入任何内容，浏览器也不会重定向到新页面。

Firefox 和 Internet Explorer 不需要，只有 chrome 可以从浏览器的内部文件资源管理器中拖动。

到此为止，还好。

BUT 如果用户尝试离开文件 window（通过单击取消/关闭或加载新文件）然后 chrome彻底崩溃。（它不会每次都崩溃，但 3 次测试会崩溃 1 次）至此：剩下的唯一可能性是强制浏览器关闭

Bug in image

我真的不明白为什么：/

我尝试了所有方法来找出 console.log 出现问题的地方......但在崩溃之前没有任何反应。不事件来自 .js 的 onchange()...

我也试过用小文件做，结果是一样的。

我认为错误来自 Chrome 浏览器，但我仍然不能让我的网站这样，我真的需要你的帮助。

我的想法是：

关闭文件 Window 在用户尝试拖动某些东西后似乎不可能 javascript 关闭我们自己没有打开的东西
无法从浏览器的文件 window 中移动或拖动任何文件。就像在 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>

Answer 1

我真的很惊讶这个问题导致了任何评论。这种崩溃仍在许多 chrome.

的网站上发生

不过，我终于找到了解决这个问题的方法。它没有告诉我为什么它在 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';


    }
)

也许有人找到了更好的答案，但我希望这个 post 可以帮助很多人。

唯一的问题是：它也阻止用户从文件资源管理器中拖动（不仅是从浏览器的文件 window 中拖动）。但我想你会找到处理它的方法。

我只是为未来的读者做一个问题总结：当我从浏览器的内部文件 window 中拖动文件（仅 chrome），然后试图关闭它：它经常使这个崩溃。

祝大家有个愉快的一天:)

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

Crash in chrome with input [type = file] / Drag and drop javascript jquery

javascript

crash

jquery

google-chrome

drag