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

Question

我正在用 Django 制作一个网站来上传照片，遵循这篇博文。我一直在 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>

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

Answer 1

我终于找到了问题所在。在base_generic.html我有一个 javascript 块：{% block javascript %}{% endblock %}尽管该块中没有任何内容，但它显然在 .js 中循环了 javascript 块images_upload.html。解决方案：从base_generic.html.也许这很明显？显然我不太了解块标签。