0

I created a form that collects files uploads. At first, I passed the form data to a PHP file (action="filename.php") that processed the data and uploaded the file to a dedicated folder in the server, and it worked great. the only thing that bothered me is that when the user clicking "submit", it is redirecting him to the PHP page, but i want that all the PHP process will work only behind the scenes. So I used an ajax code that a stack overflow user uploaded to here, and here is the problem: I do get the success alert when i'm clicking on "submit", but when i enter the server - I don't see the file that needed to upload into the server. i think that it is something in the PHP process that i need to adjust because the new changes

$('.form1').submit(function(e){
    e.preventDefault();

        var str = $( ".form" ).serialize();

    $.ajax({
        url: '/Learn/wordpress/wp-content/themes/hello-elementor/upload.php',
        type: 'post',
        data: $('.form').serialize(),
        success:function(){
            var number = 4;
            alert(number);// Whatever you want to do after the form is successfully submitted
        }
    });
});
<?php 
if (isset($_POST['submit'])) {
    $file = $_FILES['file'];

    $fileName = $_FILES['file']['name'];
    $fileTmpName = $_FILES['file']['tmp_name'];
    $fileSize = $_FILES['file']['size'];
    $fileError = $_FILES['file']['error'];
    $fileType = $_FILES['file']['type'];

    $fileExt = explode('.', $fileName);
    $fileActualExt = strtolower(end($fileExt));
    $allowed = array('jpg', 'jpeg', 'png');

    if (in_array($fileActualExt, $allowed)) {
        if ($fileError === 0) {
            if ($fileSize < 10000000) {
                $fileNameNew = uniqid('', true).".".$fileActualExt;
                $fileDestination = 'test-uploads/'.$fileNameNew;
                move_uploaded_file($fileTmpName, $fileDestination);
            } else {
                echo "your file is too big!";
            }
        } else {
            echo "There was an error uploading your file!";
        }
    } else { 
        echo "you cannot upload file of this type!";
    }

}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

</head>
<body>


<form class="form1" method="POST" enctype="multipart/form-data">

<input type="file" name="file">
<button type="submit" name="submit">upload</button>

</form>

<script src="upload.js"></script>
</body>
</html>
Manish Pareek
  • 409
  • 5
  • 12
הדר הרוש
  • 1
  • 1
  • Does this answer your question? [jQuery AJAX file upload PHP](https://stackoverflow.com/questions/23980733/jquery-ajax-file-upload-php) (It's not your PHP which is the problem, it's the client-side code. The file isn't being sent - that isn't PHP's fault.) – ADyson Oct 16 '20 at 10:59
  • Also note that submit buttons are not serialized so if you need that submit check to pass in your PHP you'll have to pass that field yourself manually. – Musa Oct 16 '20 at 15:40

0 Answers0