AJAX文件上傳給出了未定義的文件錯誤

Question

讓我先解釋一下我的目標，然後顯示我的代碼。

我想要做的是製作一個基本上更新數據庫中的用戶詳細信息的頁面，我首先完成了這部分工作，並通過AJAX完美地完成了所有工作。接下來，我想通過AJAX更新用戶的個人資料圖片，所以我製作了一個普通的文件上傳PHP頁面，以確保我的PHP代碼正常工作。現在我只需要通過AJAX執行上傳，這就是我陷入困境的地方。我一直收到來自PHP頁面的錯誤消息，其中說明。

請隨時提出任何問題，並感謝您的答覆。

這裏是我的HTML表單：

<form action="upload.php?upload&type=profile" method="post" enctype="multipart/form-data"> 
    <label for="profile">Profile Picture</label><br /> 
    <img id="preview" width="200" height="200" src="<?php echo $user->getProfile(); ?>" alt="Profile Picture Preview" /><br /> 
    <br /> 
    <input type="file" name="file" id="file" onchange="loadImage(this);" /><br /> 
    <label for="username">Username</label><br /> 
    <input type="text" name="username" id="username" value="<?php echo $user->getUsername(); ?>" /><br /> 
    <label for="email">Email Adress</label><br /> 
    <input type="text" name="email" id="email" value="<?php echo $user->getEmail(); ?>" /><br /> 
    <label for="bio">Biography</label><br /> 
    <textarea name="bio" id="bio" cols="40" rows="5"><?php echo $user->getBio(); ?></textarea><br /> 
    <label for="password">New Password</label><br /> 
    <input type="password" name="password" id="password" /><br /> 
    <label for="oldPass">Current Password</label><br /> 
    <input type="password" name="oldPass" id="oldPass" /><br /> 
    <label for="first">First Name</label><br /> 
    <input type="text" name="first" id="first" value="<?php echo $user->getFirstName(); ?>" /><br /> 
    <label for="last">Last Name</label><br /> 
    <input type="text" name="last" id="last" value="<?php echo $user->getLastName(); ?>" /><br /> 
    <br /> 
    <input type="submit" name="update" value="Save" id="update" />&nbsp;<input type="button" name="reset" value="Reset Fields" onclick="resetFields()" /> 
</form> 

下面是一個包含了AJAX我的js文件：

$(document).ready(function() { 
    $("#update").click(function() { 
     profile = "pictures/default.jpg"; 
     username = $("#username").val(); 
     email = $("#email").val(); 
     bio = $("#bio").val(); 
     newPass = $("#password").val(); 
     oldPass = $("#oldPass").val(); 
     first = $("#first").val(); 
     last = $("#last").val(); 

     // First an ajax request to upload the image as it requires separate request 
     $.ajax({ 
      type: "POST", 
      url: "upload.php?upload&type=profile", 
      data: new FormData(this), 
      contentType: false, 
      cache: false, 
      processData: false, 
      success: function(resp) { 
       alert(resp); 
      }, 
      error: function (resp) { 
       alert(resp); 
      } 
     }); 

     // Now the updates in the profile 
     $.ajax({ 
      type: "POST", 
      url: "update.php", 
      data: "mode=details&profile="+profile+"+&username="+username+"&email="+email+"&bio="+bio+"&password="+newPass+"&oldPass="+oldPass+"&first="+first+"&last="+last, 
      success: function(resp) { 
       // resp contains what is echoed on update.php 
       alert(resp); 
      } 
     }); 
     return false; 
    }); 
}); 

最後，這裏是我的PHP代碼：

include "base.php"; 
// Kick user off this page if they are not logged in 
if (!isset($user)) { 
    echo "<meta http-equiv='refresh' content='0.1;url=index.php'>"; 
    exit(); 
} 
if (isset($_GET['upload'])) { 
    switch ($_GET['type']) { 
     case "profile": { 
      $dir = "pictures/"; 
      $maxFileSize = 2000000; // 2mb 
      $extensions = array("jpg", "jpeg", "png", "gif"); 
      $currentPath = pathinfo($_FILES['file']['name']); 
      $fileType = $currentPath['extension']; 
      $targetFile = $dir.$user->getUsername()."Profile.".$fileType; 
     } 
     break; 
     default: { 
      echo "<meta http-equiv='refresh' content='0.1;url=index.php'>"; 
      exit(); 
     } 
     break; 
    } 

    $upload = true; 

    // Check the file size 
    if ($_FILES['file']['size'] > $maxFileSize) { 
     echo "The file is too large."; 
     $upload = false; 
    } 

    // Limit file types 
    if (!in_array($fileType, $extensions)) { 
     echo "This file type is not allowed."; 
     $upload = false; 
    } 

    // Check if file upload is allowed and upload if it is 
    if ($upload) { 
     if (move_uploaded_file($_FILES['file']['tmp_name'], $targetFile)) { 
      echo basename($_FILES['file']['name']); 
     } else { 
      echo "There was an error during file upload."; 
     } 
    } 
} 

Answer 1

您的代碼有幾個問題。因爲你的按鈕位於Form之內，而你只在該按鈕上關聯了click，所以表單本身就像正常一樣提交，並且非常混亂jquery。爲了在jquery中正確捕獲表單，您需要將其作爲submit來運行，並添加e.preventDefault();，以便在Ajax中運行代碼而不是在頁面上提交實際表單。

您需要添加e.preventDefault();，以便您的表單不會因爲您擁有form標籤而自行提交。此外，從click改變submit

$("form").submit(function(e) { 
    e.preventDefault(); 
    profile = "pictures/default.jpg"; 
    username = $("#username").val(); 
    email = $("#email").val(); 
    bio = $("#bio").val(); 
    newPass = $("#password").val(); 
    oldPass = $("#oldPass").val(); 
    first = $("#first").val(); 
    last = $("#last").val(); 

    // First an ajax request to upload the image as it requires separate request 
    $.ajax({ 
     type: "POST", 
     url: "upload.php?upload&type=profile", 
     data: new FormData(this), 
     contentType: false, 
     cache: false, 
     processData: false, 
     success: function(resp) { 
      alert(resp); 
     }, 
     error: function (resp) { 
      alert(resp); 
     } 
    }); 

    // Now the updates in the profile 
    $.ajax({ 
     type: "POST", 
     url: "update.php", 
     data: "mode=details&profile="+profile+"+&username="+username+"&email="+email+"&bio="+bio+"&password="+newPass+"&oldPass="+oldPass+"&first="+first+"&last="+last, 
     success: function(resp) { 
      // resp contains what is echoed on update.php 
      alert(resp); 
     } 
    }); 
    return false; 
}); 

如果你正在處理一個頁面上的多個形式，或動態創建的形式，那麼你將要使用

$(document).on('submit', 'form', function(e) { 
... 
}); 

更妙的是給你的形式動態類數據

$(document).on('submit', '.myform', function(e) { 
... 
});