Upload multiple images to Database MYSQLI

Question

I am planning to have a web gallery. However, it is hard for me to use PHP to insert DB. The following code:

HTML -- I want to make a form which has category and multiple images that can be inserted into DB at the same time.

<form action="upload" method="POST" enctype="multipart/form-data">
    <p> Upload : <input type="file" id="file" name="images" /> </p>
    <p> Category : <input type="text" name="imageCategory"> </p>
    <p> <input type="submit" name="submit" value="Upload!" /> </p>
</form>

DATABASE

I am using imageName as VARCHAR not BLOB TYPE.

PHP

<?php
include ("dbConnect.php");

    if(isset($_POST["submit"])) {

        $image = $_POST['images']['tmp_name'];
        $imageName = $_POST['images']['name'];
        $imageSize = $_POST['images']['size'];
        $imageType = $_POST['images']['type'];
        $imageCategory = $_POST['imageCategory'];

        $result =   $mysqli->query("INSERT INTO imageTable (imageName, imageCategory, imageSize, imageType) 
                                  VALUES ('$imageName', '$imageCategory', '$imageSize' , '$imageType' );")

                    or die(mysqli_error($mysqli));

    } else {

        echo "<p> It is not working </p>";

    }

    header("location: index"); 

    $mysqli->close();
?>

The problem is, the category is the only one has inserted into the database successfully. But not with the imageName, imageType, and imageSize. And also i want the image to be stored into database so that I can retrieve the image from DB on the other web page. Any ideas?

Sohrab Yousefi · Accepted Answer · 2014-12-23 15:11:48Z

2

You can use 'multiple' property in the 'input' tag like this :

<form action="file-upload.php" method="post" enctype="multipart/form-data">
  Send these files:<br />
  <p> <input name="userfile[]" type="file" multiple='multiple' /> </p>
  <p> Category : <input type="text" name="imageCategory"> </p>
  <input type="submit" value="Send files" />
</form>

User can select multiple files and upload them. And at the server you will do this :

if (isset($_FILES["userfile"]) && !empty($_FILES["userfile"])) {
        $image = $_FILES['userfile']['tmp_name'];
        $imageName = $_FILES['userfile']['name'];
        $imageSize = $_FILES['userfile']['size'];
        $imageType = $_FILES['userfile']['type'];
        $imageCategory = $_POST['imageCategory'];
        $len = count($image);
        $path = "images/";
        for ($i = 0; $i < $len; $i++) {
             if (isset($imageName[$i]) && $imageName[$i] !== NULL) {
                 if(move_uploaded_file($image[$i], $path.$imageName[$i])) {
                    $result = $mysqli->query("INSERT INTO imageTable (imageName, imageCategory, imageSize, imageType) VALUES ('$imageName[$i]', '$imageCategory', '$imageSize[$i]' , '$imageType[$i]' )");
                 }
             }
        }
}
$mysqli->close();
header("location: index");

edited Dec 23, 2014 at 15:11

answered Dec 21, 2014 at 15:43

Sohrab Yousefi

1165 bronze badges

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

8 Comments

Anthosiast Over a year ago

Wow that's really cool! It works very well. Anyway, you know I am using varchar. But do you have idea to retrieve the images back? And also the directory path for the image?

Sohrab Yousefi Over a year ago

I don't understand your question ! What do you mean "retrieve the images back" ?

Anthosiast Over a year ago

Okay, I would like to get the image from database. I have tried to use SELECT and it's not working thou. Any idea?

Sohrab Yousefi Over a year ago

Get it. You get the image by SELECT like this : "SELECT * FROM imageTable" . Then you must add the path of your image to result. like this : $path = "images/"; while($image = mysqli_fetch_assoc($query)) { echo "<img src='".$path.$image['imageName']."' /><br />"; } By this way, you will show all images.

Sohrab Yousefi Over a year ago

Oh! An important point was left in the code above (the answer, not the comment). I edited the code. Check it again.

|

James Lockhart · Accepted Answer · 2014-12-21 12:24:31Z

0

First off the file information won't be in the $_POST global variable it will be in the $_FILES

From http://php.net/manual/en/features.file-upload.multiple.php (modified):

Form

<form action="file-upload.php" method="post" enctype="multipart/form-data">
  Send these files:<br />
  <p> <input name="userfile[]" type="file" /> </p>
  <p> <input name="userfile[]" type="file" /> </p>
  <p> Category : <input type="text" name="imageCategory"> </p>
  <input type="submit" value="Send files" />
</form>

Parse the global file variable to an array (we'll assume this is a helper function called parseFiles.php):

<?php

function reArrayFiles(&$file_post) {

    $file_ary = array();
    $file_count = count($file_post['name']);
    $file_keys = array_keys($file_post);

    for ($i=0; $i<$file_count; $i++) {
        foreach ($file_keys as $key) {
            $file_ary[$i][$key] = $file_post[$key][$i];
        }
    }

    return $file_ary;
}

Move the files and insert the file information into the database :

<?php

include ("dbConnect.php");
include ("parseFiles.php");

if ($_FILES['upload']) {
    $file_ary = reArrayFiles($_FILES['userfile']);

    foreach ($file_ary as $file) {

        $image = $file['tmp_name'];
        $imageName = $file['name'];
        $imageSize = $file['size'];
        $imageType = $file['type'];
        $imageCategory = $_POST['imageCategory'];

        $result =   $mysqli->query("INSERT INTO imageTable (imageName, imageCategory, imageSize, imageType) 
                                  VALUES ('$imageName', '$imageCategory', '$imageSize' , '$imageType' );")

                    or die(mysqli_error($mysqli));
    }

} else {

    echo "<p> It is not working </p>";

}

header("location: index"); 

$mysqli->close();

Hopefully that should do the job. I've not tested this I've just blind coded it so there may be some bugs

answered Dec 21, 2014 at 12:24

James Lockhart

1,04011 silver badges17 bronze badges

2 Comments

Anthosiast Over a year ago

Uhm, I think I understand your answer but I will try it out. Anyway can you make it all upload inputs become one? Just want to make user friendly.

Anthosiast Over a year ago

I have tried that and it's not working very well. Can you spot it?

Collectives™ on Stack Overflow

Upload multiple images to Database MYSQLI

2 Answers 2

8 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related