javascript - 如何将文档从标签保存到服务器目录？

Answer 1

您要实现的目标称为文件上传。在 javascript/html 方面，这取决于您希望如何上传文件。

以下问题将帮助您使用 HTML5 进行异步文件上传 如何异步上传文件？

作为替代方案，您还可以查看（在不支持 HTML5 文件上传的情况下提供后备） http://www.uploadify.com/ 和 http://blueimp.github.io/jQuery-File-Upload/

如果您已经可以访问文件对象并且您使用的是兼容的浏览器（带有 HTML5 文件 API），则可以在 js 端使用以下方法 -

function uploadFile(myFileObject) {
    // Open Our formData Object
    var formData = new FormData();

    // Append our file to the formData object
    // Notice the first argument "file" and keep it in mind
    formData.append('my_uploaded_file', myFileObject);

    // Create our XMLHttpRequest Object
    var xhr = new XMLHttpRequest();

    // Open our connection using the POST method
    xhr.open("POST", 'upload.php');

    // Send the file
    xhr.send(formData);
}

在服务器端，您需要一个文件处理脚本（上传处理程序）

以下是来自 w3schools 网站的非常原始的代码，它将文件保存在名为 upload 的目录中。

<?php
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 20000)
&& in_array($extension, $allowedExts))
  {
  if ($_FILES["file"]["error"] > 0)
    {
    echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
    }
  else
    {
    echo "Upload: " . $_FILES["file"]["name"] . "<br>";
    echo "Type: " . $_FILES["file"]["type"] . "<br>";
    echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
    echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";

    if (file_exists("upload/" . $_FILES["file"]["name"]))
      {
      echo $_FILES["file"]["name"] . " already exists. ";
      }
    else
      {
      move_uploaded_file($_FILES["file"]["tmp_name"],
      "upload/" . $_FILES["file"]["name"]);
      echo "Stored in: " . "upload/" . $_FILES["file"]["name"];
      }
    }
  }
else
  {
  echo "Invalid file";
  }
?>

有关 php 端文件上传和上述代码来源的更多信息，请查看 http://www.w3schools.com/php/php_file_upload.asp