javascript - ajax uploader (使用nginx)

Question

我有一个带有ajax XMLHttpRequest 的多文件上传(图像)脚本。我正在移动浏览器上进行测试，因为它们会被使用。问题是，chrome 在上传 10-12 张图像时停止，并出现错误:

A php on line 1 $_FILES["file1"].. not defined...

但在 Chrome 上我可以上传 5 张图片。 Mozilla 没有那么多(最多:1)。在PC上情况则完全不同。 chrome 上传的更多，没有错误。 我正在家里的 nginx Web 服务器上运行代码。这是否是由于缺少某些配置设置造成的？

什么会导致这样的错误？ 我不明白这些操作。 请帮助我!

HTML 代码

<form method="post" id="upload_form" enctypee="multipart/form-data">
    <input type="file" name="file1[]" id="file1" multiple><br>
    <input type="button" value="Upload File" onclick="uploadFile()">
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
    <h3 id="status"></h3>
    <p id="loaded_n_total"></p>
</form>

JS

function _(el) {
  return document.getElementById(el);
}

function uploadFile() {

  var len = document.getElementById("file1").files.length;
  console.log(len);
  var formdata = new FormData();

  for (var i = 0; i < len; i++) {
    formdata.append("file1[]", document.getElementById('file1').files[i]);
  }

  var ajax = new XMLHttpRequest();
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  ajax.addEventListener("error", errorHandler, false);
  ajax.addEventListener("abort", abortHandler, false);
  ajax.open("POST", "file_upload_parser.php");
  ajax.send(formdata);
}

function progressHandler(event) {
  _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
  var percent = (event.loaded / event.total) * 100;
  _("progressBar").value = Math.round(percent);
  _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}

function completeHandler(event) {
  _("status").innerHTML = event.target.responseText;
  _("progressBar").value = 0;
}

function errorHandler(event) {
  _("status").innerHTML = "Upload Failed";
}

function abortHandler(event) {
  _("status").innerHTML = "Upload Aborted";
}

PHP

$lengthFile = count($_FILES["file1"]["name"]);
for($i=0; $i<$lengthFile; $i++)
{
    $fileName = $_FILES["file1"]["name"][$i]; 
    $fileTmpLoc = $_FILES["file1"]["tmp_name"][$i];
    $fileType = $_FILES["file1"]["type"][$i]; 
    $fileSize = $_FILES["file1"]["size"][$i];
    $fileErrorMsg = $_FILES["file1"]["error"][$i]; 

    echo $fileName ."<br>";

    if (!$fileTmpLoc) { 
        echo "ERROR: Please browse for a file before clicking the upload button.";
        exit();
    }
    if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")){
        echo "$fileName upload is complete";
    } else {
        echo "move_uploaded_file function failed";
    }
}

Answer 1

尝试修复表单标记中的拼写错误 - “enctype”而不是“enctypee”