DevStud DevStud - 5 months ago 15
jQuery Question

Image upload after submit using ajax

I am trying to upload image using ajax. But i am getting this error:

Notice: Undefined index: Image in /Applications/MAMP/htdocs/request/insert.php on line 8

Notice: Undefined index: Image in /Applications/MAMP/htdocs/request/insert.php on line 9


After clicked insert button then i am getting that error. The problem is just image section. Other details will still posting. There's something I missed.But I can not find. Anyone can help me here ?

My ajax code is here:

// Insert
$("body").on("click",".insert", function(){

var Desc = $(".Desc").val();
var Title = $(".Title").val();
var Image = $("#Image").val();

var dataString = 'Desc=' + Desc + '&Title=' + Title + '&Image=' + Image ;
$.ajax({
type: "POST",
url:"request/insert.php",
data: dataString,
cache:false,
success: function(html){
// Do something
}
});

});


HTML

<form method="post" action="" id="Form" enctype="multipart/form-data">
<div class="file-field input-field">
<div class="btn">
<span>File</span>
<input type="file" name="Image" id="Image">
</div>

</div>
<div class="row">
<div class="row">
<div class="input-field col s12">
<textarea id="textarea1" name="Desc" class="materialize-textarea Desc"></textarea>
<label for="textarea1">Textarea</label>
</div>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input name="Title" id="first_name2" type="text" class="validate Title">
<label class="active" for="first_name2">First Name</label>
</div>
</div>
<div class="btn waves-effect waves-light insert" name="action">Submit
<i class="material-icons right">send</i>
</div>

</form>


PHP

<?php
include_once 'functions/db.php';
if(isSet($_POST['Title']) && isSet($_POST['Desc']) && isSet($_POST['Image'])) {

$Title = mysqli_real_escape_string($db, $_POST['Title']);
$Desc = mysqli_real_escape_string($db, $_POST['Desc']);

$Image = $_FILES['Image']['name'];
$image_tmp= $_FILES['Image']['tmp_name'];
move_uploaded_file($sliderPath);

$insert_query = mysqli_query($db,"INSERT INTO Post(Title,Desc,Image) VALUES ('$Title','$Desc','$Image')") or die(mysqli_error($db));

}
?>

Answer

You cannot send the image data like the way you are doing now inside jquery , you have to append it inside a FormData(); and then submit it to your url , as the image is multipart data , replace your javascript code with below:

$("body").on("click",".insert", function(){

     var data = new FormData();
     data.append('Desc',$(".Desc").val());
     data.append('Title',$(".Title").val());
     var Image = $("#Image").prop("files")[0];;
    data.append('Image',Image);
     $.ajax({
        type: "POST",
        url:"request/insert.php",
        data: data,
        cache:false,
        processData:false,
        contentType:false,
        success: function(html){
          // Do something   
        } 
     });

  });

and inside php it is isset(); not iSset(); and also inside php change :

$_POST['Image'] 

to :

$_FILES['Image']
Comments