Insert text and images into mysql with PHP and JS

Hello there!

I hope you guys can help me. I would like to store multiple images into mysql along with some data using a html form.
To be more specific, I’d like to store images (for example 5 or 7 ect.) assigned to a Post ID.

Something like this.

I’ve written a basic script to insert text to database but text only and now I got stuck.

The HTML FORM

<form action="process_add.php" method="post">
<input type="text" name="cimEN" id="cimEN" class="form-control" value="">
<textarea name="szoveg" id="szoveg" class="form-control"></textarea>
<input type="submit" class="btn btn-primary pull-right" value="Save">

The process_add.php

<?php
if(isset($_POST["published"])){
   $_POST["published"] = 1;

   }
else {
    $_POST["published"] = 0;
}

if(createPage($_POST)){
   header("Location: /content_man2/pages/pages.php");

}
else {
  header("Location: /content_man2/pages/add.php?error=Nem sikerült létrehozni az oldalt.");
}

?>

The function section:

function createPage($data){
  $pdo = DB::getConnection();
  $sql = "INSERT INTO pages (cimEN, szoveg) VALUES (:cimEN, :szoveg)";

  $statement = $pdo->prepare($sql);
  $inserted = $statement->execute([
          "cimEN" => $data["cimEN"],
          "szoveg" => $data["szoveg"]      
  ]);
    return $inserted;
}

Hi there @ennio2

To format your code, you need to place 3 backticks before and after the code (not just 1). I have corrected this for you.

One thing I noticed is you seem to be missing a <input type="file"...> if you want to upload a file.

Yeah, I know. I just posted the original code I have.
I’m wondering if there is a method to combine this insert code with this for example.

It probably is possible to combine the two scripts but I wouldn’t suggest it’s a good idea. Taking two disparate scripts and trying to combine them is seldom a practical idea. Better would be to start with one script and then begin adding the features of the other - note I say the features, not the code. Of course, this means first understanding how each of the scripts works.

The job of uploading files to the server or database can be done by PHP alone without the need for JS/jQuery.

1 Like

You are right. Is there any tutorial you can show me? :slight_smile: I’ve searched the web but didn’t find any good one. To be honest I just got into PHP so it would be nice.

I’m not suggesting it’s the best but a quick Google for how to upload a file in php brought up this tutorial which you should be able to incorporate reasonably easily into the script you posted.

You might want to consider whether you really want to store the images in your database or take the WordPress approach and simply store them in an uploaded files directory on the server.

I found a script - tutorial - which is almost does the same I want. Here it is.

My question is that what should I change to upload multiple pictures with it at once?

Depending on how many pictures you’re allowing folks to upload, you could either have multiple input fields, naming them user_image1, user_image2 etc or use JS to add new fields as required (they would still be named user_image1, user_image2 etc).

However, get the script working with one image first before you attempt to make any changes to it. That way, you have more chance of finding where you’ve gone wrong (assuming you do go wrong at some point :smiley: ).

One other thing, once you have it working, do change the form so it no longer uses tables - that is a truly awful way to format tables! :unhappy:

The script is working fine, I tested it.
Yeah, I was thinking it, I mean to create for example 5 new fields. But lets just assume that some user want to upload more than 5 pictures. JS could do it as I saw it in some examples (adding multiple fields/images) with an “Add more” button but I have no idea how to start :confused:

1 Like

That’s great! If you want to use javascript with an “add more” button, I would suggest starting a new topic in the JS forum.

1 Like

I suppose you would first modify your php script to be able to take an undetermined number of uploads. Possibly by creating an array: <input name="upload[]"

Then ask in the js forum about adding more inputs.

4 Likes

In the processing for this, the obvious choice would be a foreach loop to run the upload script on the array. But you would be wise to set a maximum number of uploads, so perhaps a while or for would be better.

$max = 5;   // Maximum number of uploads allowed

$n = 0;

while($n < $max) {

    // Process Upload for $_FILES['upload'][$n]

    $n++;  // Up one
}
2 Likes

That’s true - it would be better as an array!

Yes, since we don’t know how many, we can just loop through it.
I think the first thing in the loop should be “if is set”, as fewer than the max number would confuse things.

while($n < $max) {

   if(isset($_FILES['upload'][$n])) {
         // rest of process
   }

    $n++;  // Up one
}

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.