Question

我勇敢地为我的网站编写自定义上传控件。该控件将利用最新的HTML5功能（如果可用）提供包括客户端图像预览，实时上传进度信息等的体验，所有这些都不使用Flash。

特此我暂时打开了开发者网址：除去

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

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

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!

此正确的输出显示文件在服务器端正确接收，我们可以访问它们以进行进一步处理。我的问题如下。上传单个图像时，此服务器端输出正确。上传两张图片（一次选择两张）时也是正确的。但是，当选择要上传的3个或更多图像时，它会崩溃。服务器端输出将不正确，对于所有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网址是正确的，服务器上的$ _FILES是正确的。对于所有3个单独的请求，仅在选择3个图像时才会失败。

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

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

Answer 1

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

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

我将所选文件错误地链接到了帖子请求。在对post请求进行更深入的检查后，我看到userfile参数设置了两次。我想这完全是偶然的，它首先在某种程度上起作用。我现在正在移除演示链接。

自定义HTML5上传控件会清除Code Igniter后端中的$ _FILES数组

1 个答案: