Jquery Post image with ajax

Question

I'm making a jquery mobile app which uploads an image.

I used this code but without ajax you can't capture the echo from server(this one worked perfectly)

<form action="http://tipsnow.altervista.org/upload.php" method="post" enctype="multipart/form-data">
            Title: <input type="text" name="title" id="title" />
            Question Text: <input type="text" name="text" id="text" />
            <input type="hidden" id="idUtente" name="idUtente" value="">
            Select image to upload:
            <input type="file" name="fileToUpload" id="fileToUpload">
            <input type="submit" value="Upload Image" name="submit">
        </form>

So I implemented the ajax post:

html code:

<form action="">
                    Title: <input type="text" name="title" id="title" />
                    Question Text: <input type="text" name="text" id="text" />
                    <input type="hidden" id="idUtente" name="idUtente" value="">
                    Select image to upload:
                    <input type="file" name="fileToUpload" id="fileToUpload">
                    <input type="submit" value="Upload Image" name="submit">
                </form>

jquery code:

$(document).ready(function () {

            $('form').submit(function () {
                var title = document.getElementById('title').value;
                var idUtente = sessionStorage.getItem('autenticato').toString();
                var text = document.getElementById('text').value;
                var fileToUpload = document.getElementById('fileToUpload').files[0];

                var formData = new FormData();
                formData.append('title', title);
                formData.append('text', text);
                formData.append('idUtente', idUtente);
                formData.append('fileToUpload', fileToUpload);
                $.ajax({
                    url: 'http://tipsnow.altervista.org/upload.php',
                    data: formData,
                    type: 'post',
                    dataType: 'text',
                    contentType: false,
                    enctype: 'multipart/form-data',
                    processData: false,
                    success: function (data) {
                        alert(data);
                        return false;
                    }
                })
            });

php code:

    <?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
    echo "Sorry, your file is too large.";
    $uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
        echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
    } else {
        echo "Sorry, there was an error uploading your file.";
    }
}
?>

But as soon as I press the submit button it takes me to the first page off the app without uploading anything, which I think means that the ajax wasn't successful but what's the problem?

@edit noticed that I didn't append the submit button, did it but still doesn't work

@@ edit : 28 seconds after submitting it goes into success but it doesn't upload the img neither get the echos back in response

@@@edit: request

response

Do yourself a favor and add an error clause after your success. `error: function(xhr, textStatus, errorThrown){ alert(xhr.status + ': ' + errorThrown); }` — Steven B., Jun 20 '16 at 19:26
@KondorKondorowski instead of removing it, you should put it in the correct place (which would result in your form submit no longer going to another page) — Kevin B, Jun 20 '16 at 19:40

Mikey · Answer 1 · 2016-06-20T20:44:41.470

0

It's a lot easier than what everyone is making it.

Simply pass the form element into a FormData constructor. All the values of your input elements with name attributes (including files) will be passed to your PHP script.

Also, you need to use e.preventDefault(); to stop the form from submitting.

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

    // 'this' refers to this current form element 

    $.ajax({
        type: 'post',
        url: 'http://tipsnow.altervista.org/upload.php',
        data: new FormData(this), // important
        contentType: false, // important
        processData: false, // important
        success: function (data) {
            alert(data);
            return false;
        }
    })
});

edited Jun 20 '16 at 20:44

answered Jun 20 '16 at 20:38

Mikey

6,432
4
20
36

yes i knew you could write it that way but it still wont work... , after waiting about 28 seconds it gives me an empty response – Kondor Kondorowski Jun 20 '16 at 20:55
Turn on your [PHP errors](http://stackoverflow.com/questions/1053424/how-do-i-get-php-errors-to-display). Echo out `$_FILES["fileToUpload"]["error"]` at the beginning and see what [value](http://php.net/manual/en/features.file-upload.errors.php) it gives you. – Mikey Jun 20 '16 at 22:08
i'm using a free database and i dont have access to php.ini , even if i had how do i echo it ?i cant get any data in response from server – Kondor Kondorowski Jun 20 '16 at 22:36
It has nothing to do with database nor modifying php.ini. You just have to add three lines of code in your PHP script. Comment out all your PHP code and just do `error_reporting(E_ALL); ini_set('display_errors', 1); var_dump($_FILES);` – Mikey Jun 20 '16 at 23:12
ok did it, it does the same thing as before: have to wait 30 seconds then it says 200 OK but no response – Kondor Kondorowski Jun 21 '16 at 00:36
the problem happens only when i place in the data field of the 'post' a FormData – Kondor Kondorowski Jun 21 '16 at 16:48

score -1 · Answer 2 · answered Jun 20 '16 at 19:28

-1

first you have to stop action after submit

$( "form" ).submit(function( event ) {
    event.preventDefault();
    (...)
}

after you implement it check in browser console (e.g. in firefox you have firebug) what exactly data you got

to take data from form you can just use:

$( this ).serialize()

check it: https://api.jquery.com/serialize

answered Jun 20 '16 at 19:28

semafor

51
4

2

you can't use .serialize() if you're working with file inputs. – Kevin B Jun 20 '16 at 19:34
when you choose network tab then you don't have any request to server? – semafor Jun 20 '16 at 19:38
@semafor ok i got it, it is pending for like 1m then it show an empty alert and it says it has no response. Obviously the image doesnt upload – Kondor Kondorowski Jun 20 '16 at 19:49

Jquery Post image with ajax

2 Answers2