0

I'm having a problem when I upload an image using php and ajax. the image location is not sent to database and local directory. here is the html form , php code and ajax. when I submit other values are being sent to the database except the image location.

form

<form role="form"  action="" enctype="multipart/form-data" id="product_form" onsumbit="return false" >
        <div class="form-row">
          <div class="form-group col-md-6">
            <label >Product Name</label>
            <input type="text" class="form-control" id="product_name" name="product_name">
            <small id="pro_error" class="form-text text-muted"></small>
          </div>
          <div class="form-group col-md-6">
            <label >Category</label>
            <select class="form-control" id="select_cat" name="select_cat" required >

            </select>
          </div>
        </div>

        <div class="form-row">
          <div class="form-group col-md-6">
            <label >Price</label>
            <input type="text" class="form-control" id="product_price" name="product_price">
          </div>
          <div class="form-group col-md-6">
            <label >Quantity</label>
            <input type="text" class="form-control" id="product_qty" name="product_qty">
          </div>
          <div class="form-group col-md-6">

            <div class="form-group">
              <label >Photo</label>
              <input type="file" class="form-control-file"  name="image" id="image">
            </div>
          </div>

        </div>

        <button type="submit" class="btn btn-primary">Submit</button>
</form>

Ajax code

$('#product_form').on("submit", function(){
        $.ajax({
            url : DOMAIN+"/user/process.php",
            method : "POST",
            data : $("#product_form").serialize(),
            success : function(data){
                if(data=="PRODUCT_ADDED"){
                    alert(data);
                }else{
                    console.log(data);
                    alert(data);
                }

            }
        }) 

}) 

here is my php code which receives the values. process.php

//add Product

if(isset($_POST['product_name']) AND isset($_POST['select_cat'])){
    $obj = new DBoperation();
    $fileInfo = PATHINFO($_FILES["image"]["name"]);

    if (empty($_FILES["image"]["name"])){
        $location="";
    }
    else{
        if ($fileInfo['extension'] == "jpg" OR $fileInfo['extension'] == "png") {
            $newFilename = $fileInfo['filename'] . "_" . time() . "." . $fileInfo['extension'];
            move_uploaded_file($_FILES["image"]["tmp_name"], "../upload/" . $newFilename);
            $location = "upload/" . $newFilename;
        }
        else{
            $location="";
            ?>
                <script>
                    window.alert('Photo not added. Please upload JPG or PNG photo only!');
                </script>
            <?php
        }
    }
    $result = $obj->addProduct($_POST['select_cat'], 
                                $_POST['product_name'],
                                $_POST['product_price'],
                                $_POST['product_qty'],
                                $location);
    echo $result;
    exit();
}
Markus Zeller
  • 8,516
  • 2
  • 29
  • 35
  • You cannot upload files using `serialize`, see [here](https://stackoverflow.com/questions/5392344). – msg Apr 14 '20 at 07:43
  • See https://stackoverflow.com/a/28309702/5389997 answer from the duplicate question. – Shadow Apr 14 '20 at 07:44

0 Answers0