PHP image upload through Ajax serialize()

Question

File upload through ajax serialize():

<form id="addform" class="form-horizontal" enctype="multipart/form-data" >
<div class="form-group">
    <label for="link" class="control-label col-xs-3">Image</label>
    <div class="col-xs-6">
        <input id="file" name="file" type="file"  class="form-control">
    </div>
</div>
</form>

AJAX CODE using serialize():

$('#save11').click(function(){      

    $.ajax({                
            type : "POST",
            url : "page/add-journal.php",
            data :$('#addform').serialize(),
            success : function(data)
            {
                alert(data);
                window.location.href="home-page.php";       
            }
    });
});

Here PHP code:

<?php
    include '../dbConnection.php';
    $tmp=$_FILES['file']['tmp_name'];
    $serverpath="upload/".$_FILES['file']['name'];
    $file=$_FILES['file']['name'];
    move_uploaded_file($tmp,$serverpath);

    $sql="insert into journal set file='".$file."'";    
    $query=mysql_query($sql);               

?>

Only give me solution using serialize() only. If not so give me best solution.

Ajax image upload is not possible using `form serialization`.. you should use jquery's `formData` class.. check this answer here : http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax — Nishant Solanki, Jun 04 '15 at 07:54
@NishantSolanki..I have to post all form data with image and I have little bit knowledge of ajax. so how to post all data with image in ajax without serialize()?? — meena haldher, Jun 04 '15 at 08:14
if the answer helped you out than please consider chosing as the right answe.. thanks — Nishant Solanki, Jun 08 '15 at 13:09

score 2 · Answer 1 · edited Oct 10 '15 at 08:48

I have made some changes in your code.. you can use below code for uploading images using ajax

<form id="addform" class="form-horizontal" enctype="multipart/form-data" >
            <div class="form-group">
                <label for="link" class="control-label col-xs-3">Image</label>
                <div class="col-xs-6">
                    <input id="file" name="file" type="file"  class="form-control">
                </div>
                <input type="submit" name="save" value="save" />
            </div>
        </form>
        <script>
            $('#addform').submit(function(e) {
                e.preventDefault();
                var data = new FormData(this); // <-- 'this' is your form element

                $.ajax({
                    url: 'page/add-journal.php',
                    data: data,
                    cache: false,
                    contentType: false,
                    processData: false,
                    type: 'POST',
                    success: function(data) {
                        alert(data);
                        window.location.href = "home-page.php";
                    }

                });
            });
        </script>

Note:

you haven't provided that how you submit your form, so I have put a submit button
You are using mysql functions, but they are officially deprecated now from php, you should use mysqli or PDO.

Jigar · Answer 2 · 2015-06-04T08:05:55.367

Form id in HTML is addform and in ajax you are using #addformkey. You will have to change the id at one place. I doubt this will work though.

only give me solution using serialize () only

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

The .serialize() method creates a text string in standard URL-encoded notation. It can act on a jQuery object that has selected individual form controls, such as <input>, <textarea>, and <select>: $( "input, textarea, select" ).serialize();

I doubt it can serialize a file.

PHP image upload through Ajax serialize()

2 Answers2