Question

我将Fine Uploader合并到一个已存在的表单中。

我添加了三个Fine Uploader文件上传字段。我有一个脚本控制所有三个框。我查看了inputName属性并尝试更改它，但它将所有精细上传字段的名称更改为我设置为inputName的名称（在本例中为photo1）。这不完全是我想要的。我想将每个字段的inputName设置为不同的字段。

在我的情况下，重要的是我有3个单独的盒子，因为我有一个与每张照片一起的消息框。

我主要想使用Fine Uploader，因为它允许iphone用户选择照片（如果他们在手机上）以及选择照片后的缩略图预览。所有这些都很棒。

我所拥有的表单的其余部分已经运行，我可以使用标准输入文件字段提交它。

问题：

有没有办法在一个页面上使用多个字段？我需要吗？写一个单独的$（'＃photo1'）。fineUploader（）{...}）;每个输入框？
有没有办法更改每个文件上传字段的输入名称？
我假设我可以使用单独的脚本块实现此目的，但是有没有比重复所有代码更好/更干净的东西？
我下载了PHP Server Handler文件，当我使用interceptSubmit：true提交我的测试表单时，我看到图像上传到我的服务器。这样可行。（我有点做了一个简单的表格来测试它）。当我更改为interceptSubmit：false时，添加一个名为thankyou_post.php的页面作为我的帖子操作页面，在该页面中，我只是看到了print_r发送的表单（$ _ POST）;我得到的是Array（[submit] =＆gt; submit）作为回复。

我想我的下一步是尝试为每个文件字段编写自定义块，看看表单是否可以更好地处理。

  $(document).ready(function () {
    $('#photo1, #photo2, #photo3').fineUploader({
            debug: true,
            template: "qq-dav-photo-with-thumb",
            thumbnails: {
          placeholders: {
            waitingPath: "placeholders/waiting-generic.png",
            notAvailablePath: "placeholders/not_available-generic.png"
          }
      },
            form: {
                interceptSubmit: false
            },
            camera: {
                ios: true
            },
      request: {
        endpoint: 'thankyou.php',
                paramsInBody: true,
                inputName: 'photo1'
      },
            messages: {
                emptyError: 'File is empty',
                noFilesError: 'No files attached.',
                onLeave: 'We are still uploading your files...Please wait.'
            },
            validation: {
                allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
                itemLimit: 3,
                stopOnFirstInvalidFile: true
            }
    }).on('progress', function (id, fileName, uploadedBytes, totalBytes) {

            console.log('progress...');

}).on('complete', function(event, id, fileName, responseJSON) {
    if (responseJSON.success){

        file_name = responseJSON.name;
        console.log('hoorah! File name: '+file_name);
    };
}).on('allComplete', function(event, id, fileName, responseJSON) {
        console.log('hoorah! All complete!');
});

  });

关于我能做些什么才能使这项工作？

更新＃1 链接：http://ijwebsites.com/fineuploader/

这是我的表单页面上的HTML。

<form action="thankyou_post.php" method="post"
id="qq-form" name="webform" enctype="multipart/form-data" >

<!-- Fine Uploader DOM Element
====================================================================== -->
<div id="photo1"></div>

<br>
<br>

<div id="photo2"></div>

<br>
<br>

<div id="photo3"></div>

<input type="submit" name="submit" value="submit">

</form>

我的测试页面的thankyou_post.php页面非常基本，我只是想让它告诉我提交给页面的值是什么，所以我在该页面上做了这些：

<?php
if ($_FILES["photo1"]["error"] > 0) {
  echo "Error: " . $_FILES["photo1"]["error"] . "<br>";
} else {
  echo "Upload: " . $_FILES["photo1"]["name"] . "<br>";
  echo "Type: " . $_FILES["photo1"]["type"] . "<br>";
  echo "Size: " . ($_FILES["photo1"]["size"] / 1024) . " kB<br>";
  echo "Stored in: " . $_FILES["photo1"]["tmp_name"];
}
?>

当我提交表单时，我收到一条消息“错误：4”。您认为问题是什么？

Answer 1

如果您希望在同一页面上拥有多个上传者，并且每个上传者都有不同的选项（在这种情况下，不同的request.inputName option），您需要初始化每个实例分别。如果您愿意，可以将初始化组合到一个将输入名称作为参数的公共函数中。

如果您希望Fine Uploader发送表单的全部内容（包括所选文件），请确保form.interceptSubmit选项设置为true（这是默认设置）。如果您不希望这种情况发生，并且您希望在单独的请求中上传所选文件，则不应在Fine Uploader中启用表单支持。为那些希望Fine Uploader完全管理表单的人创建了表单支持。

从您的问题中不清楚您的表单是什么样的，因为您遗漏了标记。如果您希望Fine Uploader在单个表单中控制多个文件输入元素，那么您将需要使用extraButtons option。

精简上传器更改输入名称以匹配我的脚本所期望的内容

1 个答案: