Question

我正在尝试在页面上实现多个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（...）为空或未找到[对象对象] 。

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

Answer 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)
  });
});

jQuery文件上传-同一页面上的多种表单

1 个答案: