jQuery AJAX と PHP を使用して単純なファイル アップロードを実装する方法

PHP を使用した jQuery AJAX ファイルのアップロード

問題: jQuery AJAX を使用した最小限のセットアップで簡単なファイル アップロードを実装し、 PHP.

初期 HTMLおよび JavaScript スクリプト:

<!-- HTML -->
<input>

<!-- JavaScript -->
$("#upload").on("click", function() {
  var file_data = $("#sortpicture").prop("files")[0];
  var form_data = new FormData();
  form_data.append("file", file_data);
  alert(form_data);
  $.ajax({
    url: "/uploads",
    dataType: 'script',
    cache: false,
    contentType: false,
    processData: false,
    data: form_data,
    type: 'post',
    success: function() {
      alert("works");
    }
  });
});

問題が発生しました:
ファイルをアップロードすると、「[object FormData]」を示すアラートが表示され、成功アラートが表示されます呼び出されないままであり、「アップロード」にはファイルが存在しません。

解決策:
ファイルのアップロードを容易にするには、ファイルの再配置と管理を処理するサーバー側スクリプトが必要です。

更新JavaScript スクリプト:

$('#upload').on('click', function() {
  var file_data = $('#sortpicture').prop('files')[0];
  var form_data = new FormData();                  
  form_data.append('file', file_data);
  alert(form_data);                             
  $.ajax({
    url: 'upload.php', // Point to server-side PHP script 
    dataType: 'text',  // Expect a response from the PHP script
    cache: false,
    contentType: false,
    processData: false,
    data: form_data,                         
    type: 'post',
    success: function(php_script_response){
      alert(php_script_response); // Display response from the PHP script
    }
 });
});

サーバー側PHP スクリプト (upload.php):

<?php

if ( 0 < $_FILES['file']['error'] ) {
  echo 'Error: ' . $_FILES['file']['error'] . '<br>';
}
else {
  move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
}

?>

追加の考慮事項:

• アップロード ディレクトリへの指定されたサーバー パスが正しいことを確認してください。
• アップロード ディレクトリに書き込みがあることを確認します
• move_uploaded_file 関数のパラメータを調整して、ファイルの配置と名前をカスタマイズします。
• サイズ関連の問題を防ぐために、upload_max_filesize と post_max_size の PHP 構成設定を確認してください。

以上がjQuery AJAX と PHP を使用して単純なファイル アップロードを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。