jQuery 打开文件对话框在 Chrome 和 IE 中多次打开答案

【问题标题】：jQuery open file dialog opens multiple times in Chrome and IEjQuery 打开文件对话框在 Chrome 和 IE 中多次打开
【发布时间】：2020-01-14 18:03:17
【问题描述】：

我正在使用 Django 创建一个网站来上传照片，遵循blog post。我一直在 Firefox 中进行开发，并且运行良好。我刚刚在 Chrome 和 Internet Explorer 中尝试过，它们都在选择文件后重新打开打开文件对话框。 IE 实际上在第一次之后开始上传（在重新打开的对话框后面）。 Chrome 在第二次选择之前不会开始上传，如果第一次选择关闭或取消，它将重新打开对话框。

我浏览了 SO 上的相关帖子，但似乎找不到任何对我有意义的内容。鉴于下面的代码，为什么对话框会打开两次？为什么它在 Firefox 中的行为会有所不同？

images_upload.html：

{% extends "base_generic.html" %}

{% load staticfiles %}

{% block content %}
<form method="post" enctype="multipart/form-data">
  {% csrf_token %}
  <!-- {{ formE.as_p }} -->
</form>


  {% block javascript %}

    <script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>

    <script src="{% static 'js/jquery-file-upload/vendor/jquery.ui.widget.js' %}"></script>
    <script src="{% static 'js/jquery-file-upload/jquery.iframe-transport.js' %}"></script>
    <script src="{% static 'js/jquery-file-upload/jquery.fileupload.js' %}"></script>

    <script src="{% static 'photos/js/images-upload.js' %}"></script>
  {% endblock %}

  {% block image_content %}
    <div style="margin-bottom: 20px;">
      <button type="button" class="btn btn-primary js-upload-photos">
        <span class="glyphicon glyphicon-cloud-upload"></span> Upload photos
      </button>
      <input id="fileupload" type="file" name="image" multiple
             style="display: none;"
             data-url="{% url 'ExifReader:image_upload' %}"
             data-form-data='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'>
    </div>

    <div class="modal" id="modal-progress" data-backdrop="static" data-keyboard="false">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Uploading...</h4>
          </div>
          <div class="modal-body">
            <div class="progress" style="height: 42px;">
              <div class="progress-bar" role="progressbar" style="height: 42px; width: 0%;">0%</div>
            </div>
            <br>
            <button id="done-button" type="button" class="btn btn-primary" style="display: block; margin: 0 auto;">
              <span class="glyphicon glyphicon-cloud-upload"></span>
              Done. View uploaded images.
            </button>
          </div>
        </div>
      </div>
    </div>

  {% endblock %}

{% endblock %}

images-upload.js：

$(function () {
  console.log('HERE'); // Added Sep. 13 for debugging - prints twice
  $(".js-upload-photos").click(function () {
    $("#fileupload").click();
  });

  $("#fileupload").fileupload({
    dataType: 'json',
    sequentialUploads: false,
    start: function (e) {
      $("#modal-progress").modal("show");
      $("#done-button").css("visibility","hidden");
    },
    stop: function (e) {
      $("#modal-progress").modal("show");
      $("#done-button").css("visibility","visible");
      $("#done-button").click(function() {
        window.location = '/imagerydatasystem/image_display'
      });
    },
    progressall: function (e, data) {
      var progress = parseInt(data.loaded / data.total * 100, 10);
      var strProgress = progress + "%";
      $(".progress-bar").css({"width": strProgress});
      $(".progress-bar").text(strProgress);
    },
    done: function (e, data) {
      if (data.result.is_valid) {
        $("#gallery tbody").prepend(
          "<tr><td><a href='" + data.result.url + "'>" + data.result.name + "</a></td></tr>"
        );
      }
    },
  });
});

编辑：我在images-upload.js 的第 2 行添加了行console.log('HERE');，并在控制台中打印了两次。我猜脚本以某种方式被调用了两次？

【问题讨论】：

我尝试参考该示例并发现在该示例中他们设置了sequentialUploads：false，而您已将其设置为false。出于测试目的，尝试将其设置为 true 并检查它是否解决了问题。如果问题仍然存在，您可以尝试在 IE 或 chrome 中逐步调试代码，这可以帮助您找到多次触发文件上传的原因。
感谢您的建议。我尝试将sequentialUploads 从false 更改为true，但结果相同。现在尝试逐行调试，但是有额外的 Django 级别让我感到困惑。
我的猜测是您在页面上多次包含 images-upload.js，或多个 jqueries，或两者兼而有之。点击页面时查看您的网络标签。
网络选项卡确认脚本包含两次。根据我对 Django 的理解，可以多次包含静态文件而不会出现问题（例如 here）。这是不同的吗？我在我的问题中添加了完整的 html 模板。

标签： javascript jquery html google-chrome internet-explorer

【解决方案1】：

我终于找到了问题所在。在 base_generic.html 我有一个 javascript 块：
{% block javascript %}{% endblock %}
尽管该块中没有任何内容，但它显然正在循环 images_upload.html 中的 javascript 块。解决方案：从base_generic.html中删除块。

也许这很明显？显然我不太了解块标签。

【讨论】：