AJAX JQuery上传图像[重复]

Question

This question already has answers here:

                </div>
            </div>
                    <div class="grid--cell mb0 mt4">
                        <a href="/questions/166221/how-can-i-upload-files-asynchronously" dir="ltr">How can I upload files asynchronously?</a>
                            <span class="question-originals-answer-count">
                                (34 answers)
                            </span>
                    </div>
            <div class="grid--cell mb0 mt8">Closed <span title="2014-12-22 00:07:03Z" class="relativetime">5 years ago</span>.</div>
        </div>
    </aside>

I want to create the process of uploading an image with jquery ajax. here's my code :

<form action="" method="post" name="formPicture" enctype="multipart/form-data">
    <div class="modal-body panel-modal-scrol">
        <input type="file" name="picture" class="form-control" />
    </div>
    <div id="info"></div>
    <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
    <input type="submit" value="Save" id="btn-saving" class="btn btn-primary" />
</form>
<script>
$("[name=formPicture]").submit(function(e){
    e.preventDefault(); 
    var formData = $(this).serialize();
    console.log(formData);

    $.ajax({
       type: 'POST',
       url: 'upload_picture.php',
       data: formData, 
       success: function(data){
        console.log(data);                        
       }
    });
});
</script>

upload_picture.php

<?php
$path = $_FILES['picture']['tmp_name'];
$file_name   = $_FILES['picture']['name'];
$newPath     = "upload/";
move_uploaded_file($lokasi_file,$newPath.$file_name);
$insert="INSERT INTO `picture`(`picture`) 
                        VALUES ('$file_name')";
$query=mysql_query($insert);
if($query){
    echo '{"status":"success"}';
    exit;
}else{
    echo '{"status":"error"}';
    exit;
}
?>

but the error said "Notice: Undefined index: picture on line 4"; there's something wrong with my code ? Thanks..

</div>

Answer 1

1st aprroach:-

You will need to use formData() for using ajax and ajax calls need a couple of more parameters to be set. Just follow :-

http://hayageek.com/jquery-ajax-form-submit/

But do check the browser compatability

Edit: - Live code(php) + demo - here

2nd approach:-

You can also use iframes for uploading images instead of AJAX

http://www.akchauhan.com/upload-image-using-hidden-iframe/

You will get working examples of both approaches as per the server side language you are using(i.e php, rails, java etc)