ajax uploader(使用nginx)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax uploader(使用nginx)相关的知识,希望对你有一定的参考价值。

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

第1行的php $ _FILES [“file1”] ..未定义...

但在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";
    }
}
答案

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

以上是关于ajax uploader(使用nginx)的主要内容,如果未能解决你的问题,请参考以下文章

Python-Django 如何在管理员中使用 django-ajax-uploader?

(转)mac 搭建基于RTMP的本地Nginx服务器报错homebrew/nginx was deprecated. This tap is now empty as all its form(代码片

php代码而不是Ajax中的数据

如何在没有服务器端代码的情况下使用 Web API,只使用 Ajax

ajax进error的原因

转:使用 Nginx Upload Module 实现上传文件功能