PHPによるAJAXイメージのアップロードエラー

Question

なぜこのエラーが発生しますか？私はコード断片がありませんか？もしそうなら、簡単な説明をしてください。私はajaxとjQueryの初心者です。私は既にGoogleを検索しました。しかし、それらの多くは私が理解していない画像アップロードに関する技術です。助けて。ありがとう。

$(document).ready(function(e) { 

      $(".frmUpload").on('submit',(function(e) { 
        e.preventDefault(); 
        $(".upload-msg").text('Loading...'); 
        $.ajax({ 
         url: "processor2.php", 
         type: "POST", 

         success: function(data){ //function to be called if request succeeds 
          $(".upload-msg").html(data); 
         } 
        }); 
      })); 
    }); 

      <h1>Ajax Image Upload</h1> 
     <form action="" method="post" class="frmUpload"> 
      <input type="file" name="photoUpload" id="ajaxUpload"> 
      <input type="submit" value="UPLOAD"> 
     </form> 
     <div class="img-preview"></div> 
     <div class="upload-msg"></div> 

PHPスクリプトは、以下に示されています。

<?php 
     // photoUpload was given to name attribute of the upload field in the form 
     if(is_uploaded_file($_FILES['photoUpload']['tmp_name']) && $_FILES['photoUpload']['error']==0) { 
      echo "The file was uploaded successfully to the temporary location, but has not been saved<br>"; 
      echo "<br>The file is temporary stored: ". $_FILES['photoUpload']['tmp_name']; 
      echo "<br>The file name was: ". $_FILES['photoUpload']['name']; 
      echo "<br>The file type is: ". $_FILES['photoUpload']['type']; 
      echo "<br>The file size (bytes) is: ". $_FILES['photoUpload']['size']; 

      //check file size 
      if ($_FILES['photoUpload']['size'] > 5242880) 
       die ("<hr>Sorry, this file is larger than 5 MB"); 

      echo "<hr>"; 
      $allowedExts = array("gif", "jpeg", "jpg", "png"); 
      $exp_array = explode(".", strtolower($_FILES['photoUpload']['name'])); 
      $extension = end($exp_array); 

      $allowedType = array("image/gif", "image/jpeg", "image/jpg", "image/png"); 

      if(!in_array($_FILES['photoUpload']['type'], $allowedType)) 
       die ("<br>Unsupported file type!"); 

      if(!in_array($extension, $allowedExts)) 
       die ("<br>Unsupported file extension!"); 

      // file_exists() - determine file has already been uploaded 
      $path = "C:/xampp/htdocs/PHP/". $_FILES['photoUpload']['name']; 

      if(!file_exists($path)){ 
       echo "<hr>File does not exist. It is safe to move the temporary file<br>"; 
       if(move_uploaded_file($_FILES['photoUpload']['tmp_name'], $path)){ 
        echo "The file was uploaded successfully."; 
       } 
       else{ 
        echo "File upload failed!"; 
       } 
      } 
      else{ 
       echo "<br>File already exist. Please upload another file"; 
      } 

     } 
     else{ 
      echo "Please select the file to upload<br>"; 
      echo "Error code: ". $_FILES['photoUpload']['error']; 
     } 
    ?> 

Answer 1

"formData"を使用してajaxで画像をアップロードする必要があります。

下記のコードを試してください。あなたのPHPスクリプトで$_FILES['photoUpload']['tmp_name']と$_FILES['photoUpload']['name']の変数をチェックしてください。

$(".frmUpload").on('submit',(function(e) { 
        e.preventDefault(); 
        var formData = new FormData(this); 
        $.ajax({ 
         url: "processor2.php", 
         type: "POST", 
         data: formData, 
         async : true, 
         contentType: false,  // The content type used when sending data to the server. 
         cache: false,    // To unable request pages to be cached 
         processData:false, 
         success: function(data){ //function to be called if request succeeds 
          $(".upload-msg").html(data); 
         } 
        }); 
      })); 

Answer 2

非同期ファイルのアップロードには、いくつかのXMLHttpRequest（アヤックス）を使用して、ためのJavaScriptのセキュリティ制限の技術的に不可能です。ほとんどのJavaScriptの例とチュートリアルではこのメソッドをAjaxのアップロードと呼び、「仮想IFRAME」を使用して画像やファイルをアップロードしています。サードパーティ製のプラグインを使用してajaxファイルのアップロード機能を実装できます。