0

我正勇敢地为我的网站编写自定义上传控件。该控件将利用最新的 HTML5 功能（如果可用）来提供包括客户端图像预览、实时上传进度信息等在内的体验，而无需使用 Flash。

特此暂时开放开发网址： 已移除

请注意，它处于早期开发阶段，仅适用于最新版本的 Firefox 和 Chrome。选择一个或多个 JPEG 文件后，您应该会看到图像预览以及上传进度指示器。

在后端，我使用的是 Code Igniter。现在我已经将上传表单的发布请求连接到这个非常简单的控制器：

function uploadhtml5post() {
   var_dump($_FILES);
   echo "1!";
}

此服务器端响应将写入客户端的 console.log，因此要检查响应，请在浏览器中打开控制台。正确输入的示例如下（对于单个文件）：

array(1) {
  ["userfile"]=>
  array(5) {
    ["name"]=>
    array(1) {
      [0]=>
      string(12) "DSC_1160.jpg"
    }
    ["type"]=>
    array(1) {
      [0]=>
      string(10) "image/jpeg"
    }
    ["tmp_name"]=>
    array(1) {
      [0]=>
      string(14) "/tmp/phpNtZTMk"
    }
    ["error"]=>
    array(1) {
      [0]=>
      int(0)
    }
    ["size"]=>
    array(1) {
      [0]=>
      int(8435493)
    }
  }
}
1!

这个正确的输出表明文件在服务器端被正确接收，我们可以访问它们以进行进一步处理。我的问题如下。上传单个图像时，此服务器端输出是正确的。上传两张图片时也是正确的（一次选择两张）。However, when selecting 3 or more images to upload, it falls apart. 然后服务器端输出将不正确，对于所有 3 个单独的请求，$_FILES 数组将为空。

我的上传表单很简单：

<form action="<?= $this->basepath ?>uploadhtml5post" method="post" accept-charset="UTF-8" id="frmUpload" enctype="multipart/form-data">

<fieldset class="vertical">
<input type="file" name="userfile[]" id="userfile" size="20" multiple="multiple" accept="image/jpeg" onchange="processImages();" />
</fieldset>

</form>

如您所见，enctype 设置正确以及文件输入控件的名称。无论我使用“userfile”还是“userfile []”似乎都没有区别，这两种情况下的问题都是一样的。

至于我的 Javascript，现在有点乱，但这里是它的精髓：

function uploadFile(f,id) {
    var fd = new FormData(document.getElementById('frmUpload'));
    fd.append("fileToUpload", f.name);
    var xhr = new XMLHttpRequest();
    xhr.upload.id = id;
    xhr.id = id;
    xhr.upload.addEventListener("progress", uploadProgress, false);
    xhr.addEventListener("load", uploadComplete, false);
    xhr.addEventListener("error", uploadFailed, false);
    xhr.addEventListener("abort", uploadCanceled, false);
    xhr.open("POST", "./uploadhtml5post");

    updateCaption(id, "<em class=\"icon-signal\"></em> Uploading...");

    xhr.send(fd);
}

如您所见，一个自定义的 post 请求被组装然后被触发。这一切都适用于一次或两个图像。POST url 正确，服务器上的 $_FILES 正确。Only when selecting 3 images it fails, for all 3 individual requests.

从其他问题中我了解到重写规则可能会清空 $_FILES 数组。虽然我使用它们，但我不认为它们是一个原因，从那时起根本没有任何帖子可以工作。$_FILES 仅在触发 3 个发布请求时为空。

这对我来说是个谜，有什么想法吗？

4

1 回答 1

0

他们说解释你的问题会让你意识到答案，这就是其中一种情况。这应该是 FormData 的正确代码：

var fd = new FormData();
fd.append("userfile", document.getElementById('userfile').files[id]);

我已将所选文件错误地链接到发布请求。在对 post 请求进行更深入的检查后，我发现 userfile 参数设置了两次。我想这完全是偶然的，它首先起作用了。我现在删除演示链接。

于 2013-10-11T11:18:48.880 回答