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

我正在用Django制作一个网站来上传照片，如下所示。我一直在用Firefox开发，效果很好。我刚刚在Chrome和Internet Explorer中试用过，它们都在选择文件后重新打开“打开文件”对话框。IE实际上是在第一次之后开始上传的（在重新打开的对话框后面）。Chrome直到第二次选择才开始上传，如果第一次选择关闭或取消，它将重新打开对话框

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

images_upload.html：

{%extensed“base_generic.html”%}
{%load staticfiles%}
{%block content%}
{%csrf_令牌%}
{%block javascript%}
{%endblock%}
{%block image_content%}
上传照片
上传。。。
0%


完成。查看上传的图像。
{%endblock%}
{%endblock%}

images-upload.js：

$（函数（）{
console.log（'HERE'）；//为调试添加了9月13日-打印两次
$（“.js上传照片”）。单击（函数（）{
$（“#文件上载”）。单击（）；
});
$（“#fileupload”）.fileupload({
数据类型：“json”，
顺序上传：false，
开始：功能（e）{
美元（“#模式进度”）。模式（“显示”）；
$（“#完成按钮”）.css（“可见性”、“隐藏”）；
},
停止：功能（e）{
美元（“#模式进度”）。模式（“显示”）；
$（“#完成按钮”）.css（“可见性”、“可见”）；
$（“#完成按钮”）。单击（函数（）{
window.location='/imagerydatasystem/image\u display'
});
},
progressall：功能（e、数据）{
var progress=parseInt（data.loaded/data.total*100,10）；
var strProgress=进度+“%”；
$（“.progress bar”）.css（{“width”：strProgress}）；
$（“.progress bar”）.text（strProgress）；
},
完成：功能（e，数据）{
if（data.result.is_有效）{
$（“#图库正文”）。前缀(
""
);
}
},
});
});

---

编辑：我添加了行

console.log（'HERE'）

在imagesupload.js的第2行，在控制台中打印两次。我猜脚本不知怎么被调用了两次？

我终于找到了问题所在。在

base\u generic.html

中，我有一个javascript块：

{%block javascript%}{%endblock%}

尽管该块中没有任何内容，但它显然是在

images\u upload.html

中循环javascript块。解决方案：从

base\u generic.html

中删除该块

---

也许这是显而易见的？显然我不太理解块标记。

我终于找到了问题所在。在

base\u generic.html

中，我有一个javascript块：

{%block javascript%}{%endblock%}

尽管该块中没有任何内容，但它显然是在

images\u upload.html

中循环javascript块。解决方案：从

base\u generic.html

中删除该块

---

也许这是显而易见的？显然，我不太理解块标记。

我尝试参考示例，发现在该示例中，他们设置了sequentialUploads:false，正如您将其设置为false一样。出于测试目的，请尝试将其设置为true，并检查它是否解决了问题。如果问题仍然存在，您可以尝试在IE或chrome中一步一步地调试代码，这可以帮助您找到触发文件多次上载的原因。谢谢您的建议。我尝试将

sequentialUploads

从

false

更改为

true

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

sequentialUploads

从

false

更改为

true

，但结果相同。现在正试图逐行调试，但拥有额外级别的Django让我感到困惑。我猜您在页面上多次包含images-upload.js，或者多次包含jquery，或者两者兼而有之。点击页面时，请查看网络选项卡。网络选项卡会两次确认包含脚本。根据我对Django的理解，静态文件可以多次被包含而不会出现问题（例如）。这有什么不同吗？我在问题中添加了完整的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 %}

$(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>"
        );
      }
    },
  });
});