jQuery 文件上传 - 同一页面上的多个表单答案

【问题标题】：jQuery File Upload - Multiple Forms on Same PagejQuery 文件上传 - 同一页面上的多个表单
【发布时间】：2019-07-10 17:27:41
【问题描述】：

我正在尝试将多个 jQuery File Upload 表单实现到一个页面，但文档不清楚。

我已经尝试了 StackOverflow 和 Google 的许多建议和技巧，但其中很多都是旧的（6 年以上），并且似乎与当前版本无关。以下是我浏览过的一些主题：

重复文档

Multiple File Upload Widgets on the same page - main.js

未回答，对于不同的版本，或非常旧（或三者的组合）

Two jQuery File Upload widgets on the same page

jQuery File Upload - Multiple File Upload Widgets on the same page

Multiple jQuery File Upload widgets on the same page

blueimp jQuery File Upload Multiple Instance

文档在这里，似乎已经过时了

https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Upload-Widgets-on-the-same-page

在 main.js 中建议替换：

$('#fileupload').fileupload();

与：

    $('.fileupload').each(function () {
        $(this).fileupload({
            dropZone: $(this)
        });
    });

以及修改表单来改变：

id="fileupload"

到：

class="fileupload"

但是，如果您查看当前的 main.js 文件，它建议替换的行不存在： https://github.com/blueimp/jQuery-File-Upload/blob/master/js/main.js

这是我当前（无效）的代码：

表格：

    <form class="fileupload" action="upload.cgi" method="POST" enctype="multipart/form-data">

main.js：

$('.fileupload').each(function () {
  $(this).fileupload({
      dropZone: $(this)
  })
});
    'use strict';

    // Initialize the jQuery File Upload widget:
    $('#fileupload').fileupload({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        url: '/upload.cgi'
    });

    // Enable iframe cross-domain access via redirect option:
    $('#fileupload').fileupload(
        'option',
        'redirect',
        window.location.href.replace(
            /\/[^\/]*$/,
            '/cors/result.html?%s'
        )
    );

我已经替换了第 14、18 和 25 行的组合，并尝试了尽可能多的方法，但它要么不起作用，要么不起作用并产生错误，通常是 TypeError: document.getElementById(...) 为 null 或 [object Object] 未找到。

我不是 Javascript 或 jQuery 方面的专家，这就是我最初尝试使用这个插件的原因。有人可以解释一下 main.js 应该如何处理多种表单，因为文档已经过时（2012 年）或者我对它们的理解存在缺陷。谢谢。

【问题讨论】：

有什么要求？
我正在尝试将多个 jQuery 文件上传表单实现到一个页面，但文档不清楚。文档建议在 main.js 中替换 $('#fileupload').fileupload();，但 $('#fileupload').fileupload(); 不会出现在 main.js 中。这就是问题所在——我不知道代码的sn-p应该去哪里打开jQuery File Upload的多表单能力。
是否需要使用 jQuery File Upload 插件才能达到预期的效果？
不，但是可以上传多个文件，而且 jQuery File Upload 似乎已经完成了很多艰苦的工作，包括查看进度和稍后删除文件的能力。所以我认为保留它会很好......如果它有效......
jQuery 不是达到预期结果所必需的 Create multiple input type=“file” elements with their corresponding value (FileList) according to the main input type=“file” (multiple) element; How to upload and list directories at firefox and chrome/chromium using change and drop events。要将<progress> 元素与每个File 和/或FileList 对象关联，您可以调整Upload multiple image using AJAX, PHP and jQuery 处的代码

标签： jquery file file-upload upload blueimp

【解决方案1】：

您的 javascript 有点乱，我不完全确定您要完成什么 ;) 但是如果您在尝试为多个表单初始化 filesupload 插件时遇到困难，那么我想这就是您的目的寻找：

$(".fileupload").each(function() {
  $(this).fileupload({
    dropZone: $(this)
  });
});

.fileupload {
  border: 5px dashed red;
  display: inline-block;
  width: 50px;
  height: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.2/jquery.fileupload.min.js"></script>

<form class="fileupload" action="upload.cgi" method="POST" enctype="multipart/form-data"></form>
<form class="fileupload" action="upload.cgi" method="POST" enctype="multipart/form-data"></form>

编辑：

我的困惑源于我需要应用此代码以启用多个表单。

如果可能的话，我建议您在页面末尾的 body 标记中包含您的 javascript。首先是依赖项（jquery、jquery-ui 和 fileupload），然后是您自己的脚本（在本例中为 main.js）。这是您的多格式文件上传应该实现的地方。我希望下面的例子能帮助你理解这个想法：

page.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <form class="fileupload" action="upload.cgi" method="POST" enctype="multipart/form-data"></form>
    <form class="fileupload" action="upload.cgi" method="POST" enctype="multipart/form-data"></form>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.2/jquery.fileupload.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

main.js

$(".fileupload").each(function() {
  $(this).fileupload({
    dropZone: $(this)
  });
});

【讨论】：

感谢您的回复。问题是文档说这是必需的，但它没有解释代码应该去哪里。您能否解释一下您的顶级 sn-p 应该替换 main.js 的哪一部分，因为文档中没有 $('#fileupload').fileupload();。
我做了一些挖掘，找到了文档引用的原始行。这解释了为什么文档至少是错误的。但是我仍然不清楚如何使用新代码创建多个表单：github.com/blueimp/jQuery-File-Upload/blob/…
我想我明白你的困惑了。 main.js 仅包含示例，您不需要它。您只需要代码来初始化插件和依赖项（参见我的示例）。
但是您的示例仅包含我在问题中已经提供的代码。我的困惑源于 where 我需要应用此代码来启用多个表单。此外，当我删除 main.js 时，表单会完全中断。这似乎是必需的。
好的，我假设您已经想好 where 应用您的代码（因为您提供了错误），但只是不确定如何实施。添加了一个 html 页面的示例，其中脚本位于底部（在正文中）。希望这是有道理的:)