0

I am uploading images with jquery and in the jquery ui dialog, images and for their caption textboxes are shown, the result like this:

<ul id="image-list">
<li class="image-uploaded"><img src="www.site.com/gallery/e119f2-41dffd-678293-57c6db-7c665e-938481.png" class="thumb" rel="e119f2-41dffd-678293-57c6db-7c665e-938481.png"> <input id="ee773a0fee4669064560ad260cbfa2e8" name="title[]" class="input" style="width: 390px;" rel="e119f2-41dffd-678293-57c6db-7c665e-938481.png" type="text"></li>

<li class="image-uploaded"><img src="www.site.com/gallery/2658bc-992627-b4a698-f4e6f3-5719dd-d6b991.png" class="thumb" rel="2658bc-992627-b4a698-f4e6f3-5719dd-d6b991.png"> <input id="c8ca272704576fb747c5c2d76e582a4c" name="title[]" class="input" style="width: 390px;" rel="2658bc-992627-b4a698-f4e6f3-5719dd-d6b991.png" type="text"></li>

<li class="image-uploaded"><img src="www.site.com/gallery/813474-8551a5-896321-f2d8a1-bc5535-925d95.png" class="thumb" rel="813474-8551a5-896321-f2d8a1-bc5535-925d95.png"> <input id="288b465ab28b29f31889aea530e51bb3" name="title[]" class="input" style="width: 390px;" rel="813474-8551a5-896321-f2d8a1-bc5535-925d95.png" type="text"></li>

Now, I want to get images' names and their caption in textboxes, send with $.post method and in the ajax.php page I want to insert them into the database.

My jQuery code part like this:

var array = [];   
$.each($("input[name='title[]']"), function(index, value) {
    array.push($(this).attr('rel'), $(this).val());
});
$.post('ajax.php', {ImgSave:1, images: array, gallery_id : 5}, function(result) {
    $("#msg").html(result);
});

And finally, the PHP part in the ajax.php like this:

$no = $_POST["gallery_id"];
$images = $_POST["images"];
foreach ($images as $image => $title):
    $sql = "INSERT INTO gallery (gal_id, image, title) VALUES ('$no', '$image', '$title')";
    mysqli_query($connection,$sql); 
endforeach;

But it did not work. I am sending one image but in the foreach loop, it returns 2 times. In the first time it shows image name like e119f2-41dffd-678293-57c6db-7c665e-938481.png and in the second time it shows title. Could you help me?

Improve this question
3
  • array.push({$(this).attr('rel'), $(this).val()});, this way you'd connect name and title...without the parenthesis, you push them seperately into the array Commented Aug 25, 2014 at 12:10
  • 3
    It should be: array.push([$(this).attr('rel'), $(this).val()]); Commented Aug 25, 2014 at 12:11
  • @Mr.Manhattan - array.push({$(this).attr('rel'), $(this).val()}); returns error. Commented Aug 25, 2014 at 12:34

1 Answer 1

Reset to default
1

When you pass two arguments to Array.prototype.push(), you'll simply push two elements to the array.

I suspect that you want this:

array.push([$(this).attr('rel'), $(this).val()]);

To push an array for each image.

And in your PHP file

$no = post("gallery_id");
$images = $_POST["images"];
$sql = "INSERT INTO gallery (gal_id, image, title) VALUES (?, ?, ?)";
$stmt = mysqli_prepare($connection, $sql); // Use prepared statements!
foreach ($images as $imageDetails):
    //Query is prepared once, and executed multiple times with different
    //parameters!
    mysqli_stmt_bind_param($stmt, "iss", $no, $imageDetails[0], $imageDetails[1]);
    //The details are now in array form, so [0] is the 'rel' and [1] is 'value'
    mysqli_stmt_execute($stmt);
endforeach;

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thank you very much. I could not find by googling. Still I do not understand. But I will study on the prepared statements.
Please do. Otherwise you are exposed to SQL Injection attacks.