3

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

Pankaj Makwana
  • 3,030
  • 6
  • 31
  • 47
Scholli
  • 419
  • 1
  • 6
  • 15
  • 2
    `$filename = basename($_FILES["InputFile"]["name"];` - Missing closing bracket? `$target_file = $target_dir . $filename);` - Missing opening bracket? – William Isted Oct 09 '17 at 14:17
  • Turn on [error reporting](http://php.net/manual/en/function.error-reporting.php) and you will find your problems (yes, plural) – Peon Oct 09 '17 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 Oct 09 '17 at 14:41

2 Answers2

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>
Pankaj Makwana
  • 3,030
  • 6
  • 31
  • 47
  • Thanks... i tried but looks like not working. When i click submit on modalbox (bootstrap) it closed it instant and looks like no upload... – Scholli Oct 09 '17 at 14:39
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

Mayank Pandeyz
  • 25,704
  • 4
  • 40
  • 59