PHP Ajax File Upload is not working [duplicate]

Question

i use Bootstrap and have a Form in Modalbox.

There is also a Fileupload and i want to Upload Images, but if i click the Submit button, the Site looks like reloading instant and there is no File Uploading...

Here is my Ajax Script

<script type="text/javascript">
    $("#submitad").click(function () {
        $.ajax({
            url: "application/views/addad.php",
            type: "POST",
            data: $("#addad").serialize(),
            success: function (data)
            {
                alert(data);
            }
        });
    });
</script>

And this is the html form field for upload

Here the PHP thing

<?php
$target_dir = "uploads/";
$filename = basename($_FILES["InputFile"]["name"]);
$target_file = $target_dir . $filename;
$imageFileType = pathinfo($target_file, PATHINFO_EXTENSION);
$check = getimagesize($_FILES["InputFile"]["tmp_name"]);
if ($check !== false) {
    echo "File is an image - " . $check["mime"] . ".";
} else {
    echo "File is not an image.";
}
?>

But its not working...

if i kicked that out of php file it saves my other fields with type="text" and numbers

But File upload doesnt work and i already tried much of i find on google

$filename = basename($_FILES["InputFile"]["name"]; - Missing closing bracket? $target_file = $target_dir . $filename); - Missing opening bracket? — William Isted
– William Isted, Commented Oct 9, 2017 at 14:17
Turn on error reporting and you will find your problems (yes, plural) — Peon
– Peon, Commented Oct 9, 2017 at 14:21
@WilliamIsted Thanks! That was one bug! :) But upload doesnt work... it closed instant the modalbox from bootstrap and looks like reloading and dont upload file — Scholli
– Scholli, Commented Oct 9, 2017 at 14:41

Pankaj Makwana · Accepted Answer · 2017-10-09 14:21:18Z

1

Try below code and make few changes in ajax code. Add below parameters in your code.

processData: false, contentType: false,

And add var formData = new FormData($("#formID")[0]); line before ajax starts.

Or Check below code and make changes according to you code.

<script type="text/javascript">
    $("#submitad").click(function () {
        var formData = new FormData($("#addad")[0]);
        $.ajax({
            url: "application/views/addad.php",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function (data)
            {
                alert(data);
            }
        });
    });
</script>

answered Oct 9, 2017 at 14:21

Pankaj Makwana

3,0486 gold badges33 silver badges49 bronze badges

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

1 Comment

Scholli Over a year ago

Thanks... i tried but looks like not working. When i click submit on modalbox (bootstrap) it closed it instant and looks like no upload...

Mayank Pandeyz · Accepted Answer · 2017-10-09 14:20:52Z

0

To upload a file using ajax, you have to use the FormData() instead of serialize. So try it like:

var file_data = $('#InputFile').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);  // you can append as many values here as you want

$.ajax({
        url         : 'addad.php',
        dataType    : 'text',
        cache       : false,
        contentType : false,
        processData : false,
        data        : form_data,                         
        type        : 'post',
        success     : function(output){
            alert(output);
        }
});

Working Example

answered Oct 9, 2017 at 14:20

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

3 Comments

Scholli Over a year ago

I tried... but does not work... When i click submit on the Form he instant closed the modalbox and looks like reloading the site and no upload than

Mayank Pandeyz Over a year ago

Instead of type submit, use button in form

Scholli Over a year ago

Tried... <button type="button" id="submitad" class="btn btn-primary">add</button> but also not working... looks like same reloading it after click

Collectives™ on Stack Overflow

PHP Ajax File Upload is not working [duplicate]

2 Answers 2

1 Comment

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Linked

Related