Issue while File upload using ajax submit

Question

In my index.php I have a form where a file upload will happen

 <form id="uploadImage" method="post" action="upload.php">

                                    <span class="input-group-text">

                                        <label for="attach-doc" class="attachment-icon mb-0">

                                            <i data-feather="image" class="cursor-pointer lighten-2 text-secondary"></i>

                                            <input type="file" name="uploadFile" id="uploadFile" accept=".jpg, .png" /> </label></span>
                                    </form>

I have a jquery for ajax submit as

$('#uploadFile').on('change', function(){

    $('#uploadImage').ajaxSubmit({
    // target: "#editor1 .ql-editor",
    // resetForm: true
    });
 });

And my upload.php code is

<?php

//upload.php



if(!empty($_FILES))
{
    if(is_uploaded_file($_FILES['uploadFile']['tmp_name']))
    {
        $ext = pathinfo($_FILES['uploadFile']['name'], PATHINFO_EXTENSION);
        $allow_ext = array('jpg', 'png');
        if(in_array($ext, $allow_ext))
        {
            $_source_path = $_FILES['uploadFile']['tmp_name'];
            $target_path = 'upload/' . $_FILES['uploadFile']['name'];
            if(move_uploaded_file($_source_path, $target_path))
            {
                echo '<p><img src="'.$target_path.'" class="img-thumbnail" width="200" height="160" /></p><br />';
            }
            //echo $ext;
        }
    }
}

?>

File locations are :

So as per the code when I click on the upload file a ajax call should happen and the image should be uploaded to the folder upload .

But upload is not happening with the above code, Any help appreciated.

Are there any errors in the console? Did you include the jQuery Form Plugin (because ajaxSubmit() is not a standard jQuery method) correctly? — Sarah Groß
– Sarah Groß, Commented Jul 22, 2021 at 7:14
We're going to need some more specifics than "not happening". Have you done any proper debugging? — ADyson
– ADyson, Commented Jul 22, 2021 at 7:18
What debugging have you done? Have you checked the network tab (in the browsers dev tools) if a request is made, what data (if any) it sends and what the response is? Have you checked the web servers error log for PHP errors? Have you debugged to see if $_FILES are empty or not? Have you checked the value of $_FILES['uploadFile']['error']? Please do some basic debugging and report your findings. — M. Eriksson
– M. Eriksson, Commented Jul 22, 2021 at 7:19

ADyson · Accepted Answer · 2021-07-22 10:24:47Z

1

You have missed one form attribute enctype="multipart/form-data" that is used for file uploading.

If the form tag does not have this attribute, then your file will not be uploaded to the server.

Please change following line:

 <form id="uploadImage" method="post" action="upload.php">

to

<form id="uploadImage" method="post" action="upload.php" enctype="multipart/form-data">

I hope this will work for you

edited Jul 22, 2021 at 10:24

ADyson

62.9k16 gold badges86 silver badges100 bronze badges

answered Jul 22, 2021 at 9:33

Vishal_VE

2,1451 gold badge8 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ADyson Over a year ago

This is irrelevant because the upload is happening via AJAX, not a standard form submission. Not sure why this was upvoted.

Collectives™ on Stack Overflow

Issue while File upload using ajax submit

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related