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) { 
... 
});