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

Posted 2023-02-24

【中文标题】jQuery 打开文件对话框在 Chrome 和 IE 中多次打开

【英文标题】：jQuery open file dialog opens multiple times in Chrome and 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 模板。

【参考方案1】：

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

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