無法使用 ajax 和 php 上傳任何圖像文件

Question

我試圖為用戶創建一個注冊表單，可以用他們的圖像填寫他們的信息。 效果很好，一切都可以上傳到數據庫，但圖像無法上傳到數據庫。 我在 stackoverflow 上嘗試了很多搜索，有人說AJAX不支持上傳文件。 我試圖閱讀許多關於它的主題，這些主題在 stackoverflow 上被問到，但我不明白。 這是我所有的代碼。 請幫我怎么做，這對我很重要。

注冊.php

<form class="form-horizontal" method="POST"  id="registerForm" enctype="multipart/form-data" action="action.php">
    First Name
    <input type="text" class="form-control" id="f_name" name="f_name"  placeholder="First Name" value="">
    Last Name
    <input type="text" class="form-control" id="l_name" name="l_name" placeholder="Last Name" value="">
    E-Mail
    <input type="email" class="form-control" id="email" name="email" placeholder="E-Mail" value="">
    Your Image
    <input type="file" name="image" id="image">
    <div class="signup_msg">
    </div>
</form>

自定義.js

<script>
$(document).ready(function(){
    $("#registerForm").submit(function(event){
        event.preventDefault();
        var f_name = $("#f_name").val();
        var l_name = $("#l_name").val();
        var email = $("#email").val();
        var image = $("#image").val();
        var submit = $("#btnRegister").val();
        $(".signup_msg").load("action.php",{    
            f_name : f_name,
            l_name : l_name,
            email : email,
            image : image,
            submit : submit
        });

    });
});

</script>

動作.php

<?php 
include 'inc/conn.php';

if(isset($_POST['submit'])) {
    $f_name     = $_POST["f_name"];
    $l_name     = $_POST["l_name"];
    $email      = $_POST["email"];
    $image = upload();

    $sql="INSERT INTO `user_tbl` (`first_name`, `last_name`, `email`,`user_image`) VALUES ('$f_name', '$l_name', '$email','$image')";
    $run_query = mysqli_query($conn,$sql);
    if ($run_query) {
        echo "<script>alert('You are Registerd Successfully')</script>";
    }
}   


function upload($uploadDirectory = "upload/"){
    $errors = [];
    $fileExtensions = ['jpeg','jpg','png'];
    $fileName = $_FILES['image']['name'];
    $fileSize = $_FILES['image']['size'];
    $fileTmpName  = $_FILES['image']['tmp_name'];
    $fileType = $_FILES['image']['type'];
    $tmp = explode('.', $fileName);
    $fileExtension = end($tmp);
    $uploadPath = $uploadDirectory . date("YmdHis-") .basename($fileName); 

        if (! in_array($fileExtension,$fileExtensions)) {
            $errors[] = "This file extension is not allowed. Please upload a JPEG or PNG file";
        }

        if ($fileSize > 10000000) {
            $errors[] = "This file is more than 10MB. Sorry, it has to be less than or equal to 10MB";
        }

        if (empty($errors)) {
            $didUpload = move_uploaded_file($fileTmpName, $uploadPath);

            if ($didUpload) {
                return $uploadPath;
            } else {
                return 'error';
            }
        } else {
            foreach ($errors as $error) {
                return 'error';
            }
        }
}
?>

Answer 1

我認為文件是一個特殊的輸入，你能試試這個代碼嗎？

$("#registerForm").submit(function(e) {
  e.preventDefault();
  $.ajax({
    type: "POST",
    url: "action.php",
    data: $(this).serialize(),
    success: function(data) {

    }
  });
});

可以將表單數據序列化，然后通過ajax提交。

希望這可以幫助！

Answer 2

你試試FormData() ，你能試試這個嗎

<input type="file" type='file' id='file' name="file" class="image-upload" accept='image/*'/>
function uploadImg() {
    let flag = 0;
    let file = null;
    const formData = new FormData();
    if ($('.image-upload').val() != '') {
        file = $('#file')[0].files[0];
        flag = 1;
        formData.append('image', file);
        formData.append('flag', flag);
        $.ajax({
            type: 'POST',
            url: 'postStatus',
            data: formData,
            processData: false,
            contentType: false,
            success: function(res) {
                console.log(res);
            },
        });
    }
}

Answer 3

你需要使用 FormData()

例如像這樣：

var id = $('#id').val();
var image = $('#image')[0].files[0];
new form = new FormData();
form.append('id', id);
form.append('image', image);
$.ajax({
    url: 'upload',
    data: form,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    success:function(response) {
        alert(response);
    }
});

希望這有幫助！