Загрузка файла 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> 

Вот мой файл JS, содержащий AJAX:

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