Bruce Bruce - 1 month ago 11
Javascript Question

how to submit form with multipart/form-data jquery

I am submitting a form with multipart/form-data. The form has files type inputs too

this is the form

<form action="javascript:;" method="post" id="formProduct" enctype="multipart/form-data">
<div class="form-title">
<h2>Add Product....</h2>
</div>
<div class="form-group">
<label> Code </label>
<input required type="text" name="productcodes" />
</div>
<div class="form-group">
<label>Name </label>
<input required type="text" name="productnames" value="" />
</div>
<div class="form-group">
<label> Price </label>
<input type="text" name="productprices" value=""/>
</div>
<div class="form-group">
<label> Discount </label>
<input type="text" name="productdiscounts" />
</div>
<div class="form-group">
<label> Description </label>
<textarea name="productdescs" rows="2" cols="57"></textarea>
</div>
<div class="form-group">
<label> Category </label>
<select name="productcategories">
<?php while($cats = $resultcategories->fetch_assoc()){?>
<option value="<?php echo $cats['id']; ?>"><?php echo $cats['category']; ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label> Quantity </label>
<input required type="text" name="productquantities"/>
</div>
<div class="form-group">
<label> Image 1 </label>
<input type="file" name="productimages1"/>
</div>
<div class="form-group">
<label> Image 2 </label>
<input type="file" name="productimages2"/>
</div>
<div class="form-group">
<label> Image 3 </label>
<input type="file" name="productimages3"/>
</div>
<div class="form-group">
<label> Image 4 </label>
<input type="file" name="productimages4"/>
</div>
<div class="form-action clearfix">
<input class="button submit-btn" type="submit" value="Add" name="save"/>
</div>
</form>


And the product_s.php is

function mergeArrays($codes, $name, $price, $discount, $description, $category, $quantity, $image1, $image1temp, $image2, $image2temp, $image3, $image3temp, $image4, $image4temp)
{
$result = array();

foreach ( $codes as $key=>$code) {
$result[] = array( 'code' => $code, 'name' => $name[$key], 'price' => $price[ $key ], 'discount' => $discount[$key], 'description' => $description[$key], 'category' => $category[$key], 'quantity' => $quantity[$key], 'tmp_name1'=> $image1temp[$key], 'tmp_name2'=> $image2temp[$key],'tmp_name3'=> $image3temp[$key],'tmp_name4'=> $image4temp[$key],'tmp_name1'=> $image1temp[$key],'name1'=> $image1[$key],'name2' => $image2[$key],'name3'=> $image3[$key],'name4'=> $image4[$key]);
}

return $result;
}
if(isset($_POST["save"]))
{
$codes = $_POST['productcodes'];
$name = $_POST['productnames'];
$price = $_POST['productprices'];
$discount = $_POST['productdiscounts'];
$description = $_POST['productdescs'];
$category = $_POST['productcategories'];
$quantity = $_POST['productquantities'];
$image1 = $_FILES['productimages1']['name'];
$image1temp = $_FILES['productimages1']['tmp_name'];
$image2 = $_FILES['productimages2']['name'];
$image2temp = $_FILES['productimages2']['tmp_name'];
$image3 = $_FILES['productimages3']['name'];
$image3temp = $_FILES['productimages3']['tmp_name'];
$image4 = $_FILES['productimages4']['name'];
$image4temp = $_FILES['productimages4']['tmp_name'];
$target_dir = "../uploads/store/products/";
$date = date('d-m-y');
$time = time();

$result = $result2 = array();
$result = mergeArrays($codes, $name, $price, $discount, $description, $category, $quantity, $image1, $image1temp, $image2, $image2temp,$image2,$image3temp,$image4,$image4temp);
//$result = mergeArrays($codes, $name, $price, $discount, $description, $category, $quantity, $image1, $image2, $image3, $image4,$image1temp,$image2temp,$image3temp,$image4temp);
//$result = mergeArrays2($image1temp,$image2temp,$image3temp,$image4temp,$image1,$image2,$image3,$image4);
foreach($result as $row)
{
$target_file1 = $target_dir . $_SESSION['storeid'] . $_SESSION['userid']. basename($row["name1"]) ;
$uploadOk = 1;
$imageFileType1 = pathinfo($target_file1,PATHINFO_EXTENSION);
$target_file2 = $target_dir . $_SESSION['storeid'] . $_SESSION['userid'] . basename($row["name2"]);
$uploadOk = 1;
$imageFileType2 = pathinfo($target_file2,PATHINFO_EXTENSION);
$target_file3 = $target_dir . $_SESSION['storeid'] . $_SESSION['userid']. basename($row["name3"]);
$uploadOk = 1;
$imageFileType3 = pathinfo($target_file3,PATHINFO_EXTENSION);
$target_file4 = $target_dir . $_SESSION['storeid'] . $_SESSION['userid'] . basename($row["name4"]);
$uploadOk = 1;
$imageFileType4 = pathinfo($target_file4,PATHINFO_EXTENSION);

if (move_uploaded_file($row['tmp_name1'], $target_file1))
{
echo "\n"."The file ". basename( $row['name1']). " has been uploaded.";
}
else
{
echo "Sorry, there was an error uploading your file." ."<<".$imageFileType1. ">>" .$target_file1 . "...".$row["name1"]."...".$row["tmp_name1"];
}
if (move_uploaded_file($row['tmp_name2'], $target_file2))
{
echo "\n"."The file ". basename( $row['name2']). " has been uploaded.";
}
else
{
echo "Sorry, there was an error uploading your file." ."<<".$imageFileType2. ">>" .$target_file2 . "...".$row["name2"]."...".$row["tmp_name2"];
}
if (move_uploaded_file($row['tmp_name3'], $target_file3))
{
echo "\n"."The file ". basename( $row['name3']). " has been uploaded.";
}
else
{
echo "Sorry, there was an error uploading your file." ."<<".$imageFileType3. ">>" .$target_file3 . "...".$row["name3"]."...".$row["tmp_name3"];
}
if (move_uploaded_file($row['tmp_name4'], $target_file4))
{
echo "\n"."The file ". basename( $row['name4']). " has been uploaded.";
}
else
{
echo "Sorry, there was an error uploading your file." ."<<".$imageFileType4. ">>" .$target_file4 . "...".$row["name4"]."...".$row["tmp_name4"];
}
$img1 = $_SESSION['storeid'] . $_SESSION['userid'] . basename($row["name1"]);
$img2 = $_SESSION['storeid'] . $_SESSION['userid'] . basename($row["name2"]);
$img3 = $_SESSION['storeid'] . $_SESSION['userid'] . basename($row["name3"]);
$img4 = $_SESSION['storeid'] . $_SESSION['userid'] . basename($row["name4"]);

$stmtaddproduct = $mysqli->prepare("INSERT INTO store_products (product_name, product_desc, product_price, product_discount, product_category, product_quantity, product_code, store_id, product_date,product_image1, product_image2,product_image3,product_image4) VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?)");
$stmtaddproduct->bind_param("ssssiisisssss", $row['name'], $row['description'], $row['price'], $row['discount'], $row['category'], $row['quantity'],$row['code'],$_SESSION['storeid'], $date,$img1,$img2,$img3,$img4);
$stmtaddproduct->execute();
$stmtaddproduct->free_result();
$stmtaddproduct->close();
var_dump($result);
}
}


and finally this is the jquery I use

$(document).ready(function () {
$("#formProduct").submit(function (event) {

//disable the default form submission
event.preventDefault();
//grab all form data
var formData = new FormData($(this)[0]);

$.ajax({
url: '../../scripts/product_s.php',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function () {
alert('Form Submitted!');
},
error: function(){
alert("error in ajax form submission");
}
});

return false;
});
});


the form submitting alert is coming that means form is submitting but it doesn't insert data to database..

I am using merge array function to merge all the values into array and then access it.

Answer

use

var formData = new FormData(this); 

instead of

var formData = new FormData($(this)[0]);

This is will definately work.