Upload file not work with ajax

Question

I tired to solve this. my form cant upload file using ajax, but it's work without ajax. this's my code

insertpage.php

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>

<script type="text/javascript">

    $('document').ready(function(){

        $('#btn').click(function(event){
            event.preventDefault();
            var x=$('#form1').serializeArray();
            $.post(
                $('#form1').attr('action'),
                x,
                function(){
                    $('.hasil').html('Berhasil Insert');
                    $('.hasil').fadeOut(5000);
                    $('input').val("");
                    $('textarea').val("");
                })
        })

    })

</script>

</head>
<?php 

$tanggal    = date("Y-m-d");


echo"

<body>
<form id='form1' enctype='multipart/form-data' action='simpanpage.php' method='post'>

<table>
        <tr>
            <td> Foto </td> <td> : </td> <td> <input type=file name=fotoh id=fotoh> </td>
        </tr>
        <tr>
            <td> Judul </td> <td> : </td> <td> <input type=text name=judul id=judul maxlength='50' size='50' required placeholder='Masukan Judul'> </td>
        </tr>
        <tr>
            <td> Deskripsi </td> <td> : </td> <td> <textarea required id=deskripsi  name='deskripsi' > </textarea> </td>
        </tr>
        <tr>
            <td> Isi </td> <td> : </td> <td> <textarea required id=isi name='isi'> </textarea> </td>
        </tr>
        <tr>
            <td> Label </td> <td> : </td> <td> <input type=text id=label name=label  placeholder='Masukan Label'><input type=hidden name=tgl_dibuat id=tgl_dibuat value=".$tanggal."> </td>
        </tr>

    </table>

    <br>
    <button id='btn'>Save</button>
<br> <div class='hasil'> </div>
</form> 

</body>
";

?>

koneks.php

<?php

class database{

private $dbHost = "localhost";
private $dbUser = "root";
private $dbPass = "";
private $dbName = "oop_blog";

    function connectMySQL(){
    mysql_connect($this->dbHost, $this->dbUser, $this->dbPass);
    mysql_select_db($this->dbName) or die("Database tidak ada!");  
    }

    function manageinsertPage($judul, $isi, $tgl_dibuat, $deskripsi, $label){
        $lokasi     = $_FILES["fotoh"]["tmp_name"];
        $namafoto   = $_FILES["fotoh"]["name"];
        $direktori  = "gambar/$namafoto";

        if (move_uploaded_file($lokasi, $direktori))
        {
            $qry    = mysql_query("INSERT INTO pages(judul,isi,foto,tgl_dibuat,deskripsi,label) VALUES('$judul','$isi','$namafoto','$tgl_dibuat','$deskripsi','$label')");

            echo"berhasil Insert Bersama Foto";
        }

        else{
            $qry1    = mysql_query("INSERT INTO pages(judul,isi,tgl_dibuat,deskripsi,label) VALUES('$judul','$isi','$tgl_dibuat','$deskripsi','$label')");
            echo"Berhasil";
        }
    }

?>

simpanpage.php

<?php 

include "koneks.php";

$dbi = new database;

$dbi->connectMYSQL();

$dbi->manageinsertPage($_POST["judul"],$_POST["isi"],$_POST["tgl_dibuat"],$_POST["deskripsi"],$_POST["label"]);

?>

im just confused because, my form cant read $_FILES['fotoh']['name']; with ajax, that's made me fail when uploading.. the answer allways null in database. i need help here, thank you so much

possible duplicate of [How can I upload files asynchronously?](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously) — Mehdi Maghrouni, Feb 02 '15 at 04:18
i guess the problem lies to var x=$('#form1').serializeArray(); checkout new Formdata() — onegun, Feb 02 '15 at 04:19
search online for the usage of formdata, one example is http://www.formget.com/ajax-image-upload-php/ — onegun, Feb 02 '15 at 05:00

score 2 · Accepted Answer · answered Feb 02 '15 at 05:44

check here, tested

$('document').ready(function(){

    $('#btn').click(function(event){
        event.preventDefault();
        $.ajax({
            url : $('#form1').attr('action'),
            type: "POST",
            data : new FormData($('#form1')[0]),
            processData: false,
            contentType: false,
            success:function(data){

            }
        });
    })

})

score 0 · Answer 2 · answered Feb 02 '15 at 05:29

If you are using a compatible browser, you can use the $.ajax function and FormData to do the file upload with something like this:

$('document').ready(function(){
  $('#btn').click(function(event){
    event.preventDefault();
    $.ajax({
      url: $('#form1').attr('action'), // simpanpage.php
      type: 'POST',
      contentType: 'multipart/form-data', // Same as your form enctype.
      data: new FormData($('#form1')), // Your form with the file inputs.
      processData: false               // No need to process data.
    }).done(function(){
      console.log("Success: File uploaded!");
    }).fail(function(){
      console.log("Error: Failed to upload file!");
    });
  });
});

For more examples, please refer the doc.

Upload file not work with ajax

2 Answers2

Linked