how to upload a file using ajax in php after showing sweet alert?

Question

Im currently having a trouble to insert an file input (images) into my database, but it return me empty value when I'm trying to insert it into database.

this is my script

<script>
        $("#insertform").on('submit',(function(e) {
/*          $('#submit').toggleClass('active');
            document.getElementById('submit').disabled = 'disabled'; */
            var data=$('#insertform').serialize();
            e.preventDefault();
            swal({   
                title: "Are you sure",   
                text: "Do you want to save hotel data",   
                type: "info",   
                showCancelButton: true,   
                closeOnConfirm: false,   
                showLoaderOnConfirm: true, }, 
                function(){   
                    setTimeout(function(){      
                    $.ajax({
                        url: "hotels/insert_Hotel.php",
                        type: "POST",
                        data: new FormData(this),
                        async: false,
                        success: function(data){
                            swal("Saved! your hotel data has been saved");
                            location.reload();
                        },
                        contentType: false,
                        cache: false,
                        processData:false, 
                        error: function(){
                            alert('error handing here');
                        }
                    });    
                    }, 2000); 
                }); 
        }));
    </script>

this is my php file

<?php
if(is_array($_FILES)) {
if(is_uploaded_file($_FILES['logo']['tmp_name'])) {
$randomvalue=rand(1,999999999);
$date=date("Y-m-d H:i:s a");
$sourcePath = $_FILES['logo']['tmp_name'];
$targetPath = $_SERVER['DOCUMENT_ROOT']."/hotelLogos/".$randomvalue.$date.$_FILES['logo']['name'];
$dbpath="../../hotelLogos/".$randomvalue.$date.$_FILES['logo']['name'];
move_uploaded_file($sourcePath,$targetPath);
}
else{
    echo 'file not uploaded';
}
}
?>

it doesn't upload the file in to the folder and doesn't insert values to the table...

`it return me empty value` you don't return any value unless there was an error..? I would suggest you read this question: http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously — Rory McCrossan, Oct 20 '15 at 06:59
I see a lot of errors and problems while saving image with ajax. I will recommend you to use fileupload.js (https://blueimp.github.io/jQuery-File-Upload/) for uploading file via js. Its best. — Maha Dev, Oct 20 '15 at 06:59

Jai · Accepted Answer · 2015-10-20T07:02:03.793

0

new FormData(this) here this is not the form, instead you need to pass the form in your new FormData(form) in ajax:

data: new FormData($('#insertform')[0]), // <---change to this.

edited Oct 20 '15 at 07:02

answered Oct 20 '15 at 06:59

Jai

74,255
12
74
103

This would cause an error, `FormData` takes a form HTMLElement, not a jQuery object. https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData. Do you mean `FormData($('#insertform')[0])`? – Rory McCrossan Oct 20 '15 at 07:00
@RoryMcCrossan Yes right for first suggestion but is `this` referring to the form there? – Jai Oct 20 '15 at 07:04
@lahiru when you want to convert a jQuery object to dom HTMLElement as suggested in the first comment by Rory. – Jai Oct 20 '15 at 07:15
@lahiru you can put the native selector too like `new FormData(document.getElementById('#insertform'))` – Jai Oct 20 '15 at 07:16

how to upload a file using ajax in php after showing sweet alert?

1 Answers1