javascript - タグからドキュメントをサーバーディレクトリに保存するにはどうすればよいですか?

Answer 1

あなたが達成しようとしていることは、ファイルのアップロードと呼ばれます。javascript/html 側では、ファイルのアップロード方法によって異なります。

次の質問は、HTML5 を使用した非同期ファイルのアップロードに役立ちます 。ファイルを非同期にアップロードするにはどうすればよいですか?

別の方法として、 http ://www.uploadify.com/ および http://blueimp.github.io/jQuery-File-Upload/を参照することもできます (HTML5 ファイルのアップロードがサポートされていない場合のフォールバックを提供します) 。

すでにファイル オブジェクトにアクセスでき、互換性のあるブラウザ (HTML5 File 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);
}

サーバー側では、ファイル処理スクリプト (アップロード ハンドラー) が必要です。

以下は、upload というディレクトリにファイルを保存する w3schools のサイトからの非常に原始的なコードです。

<?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 を ご覧ください。