Multiple image upload

Question

I'm making the gallery website and would like to create a multiple image uploader using PHP and MYSQLI only... I'm not really good in coding so the other examples of multiple image upload on this site didn't work for me.

Here is the working code which posts the data into database according to the current user session.

html:

<form action="upload.php" method="post" enctype="multipart/form-data">
<label for="image">Select a file:</label>
<input type="file" name="image[]" id="image" multiple='multiple' /> 
<br /><br>
<label for="picname">Title:</label>
<input type="text" name="picname" id="picname" /> 
<br /><br>
<label for="picdesc">Description:</label>
<input type="text" name="picdesc" id="picdesc" /> 
<br /><br>
<label for="piccat">Category:</label>
<select name="piccat" id="piccat">
<option value="--"></option>
<option value="animation">Animation</option>
<option value="illustration">Illustration</option>
<option value="photography">Photography</option>
</select> 
<br /><br>
<input type="submit" name="submit" value="Submit" />
</form>

php & mysqli:

<?php
$path = "images/projects/";
include("check.php");

if (isset($_POST["submit"])) {
        $image = $_FILES["image"]["tmp_name"];
        $imageName = $_FILES["image"]["name"];
        $imageSize = $_FILES["image"]["size"];
        $imageType = $_FILES["image"]["type"];
        $imageTitle = $_POST["picname"];
        $imageDescription = $_POST["picdesc"];
        $imageCategory = $_POST["piccat"];
        $len = count($image);
        $path = $path . $imageName;

        $query = $db -> prepare("INSERT INTO images (user_id, image, description, type, title, size, category) 
        VALUES (?, ?, ?, ?, ?, ?, ?)");
        $query -> bind_param('issssis', $_SESSION['user_id'], $imageName, $imageDescription, $imageType, $imageTitle, $imageSize, $imageCategory);
        $query -> execute();
        $query -> close();          

    if ($imageName){
            move_uploaded_file($image, $path);
            }   
}
?>

It works fine but only uploads one image. How to select multiple images and upload all of them at once?

There is an awesome for what you are trying to do. https://github.com/samayo/bulletproof — Ikari, Mar 12 '16 at 16:34
Oh thank you but I am doing this for the course at the university and unfortunately we are not allowed to use any 3rd parties or something like that... — Elina, Mar 12 '16 at 16:48
http://stackoverflow.com/questions/24895170/multiple-image-upload-php-form-with-one-input , http://php.net/manual/en/features.file-upload.multiple.php — ANSHUL GERA, Mar 12 '16 at 19:39

Purushotam Thakur · Answer 1 · 2016-03-12T18:27:59.677

Use this one

<?php
$path = "images/projects/";
include("check.php");
if (isset($_POST["submit"])) {
  for ($i = 0; $i < count($_FILES["image"]["name"]); $i++) {
    $image = $_FILES["image"]["tmp_name"][$i];
    $imageName = $_FILES["image"]["name"][$i];
    $imageSize = $_FILES["image"]["size"][$i];
    $imageType = $_FILES["image"]["type"][$i];
    $imageTitle = $_POST["picname"];
    $imageDescription = $_POST["picdesc"];
    $imageCategory = $_POST["piccat"];
    $path = $path . $imageName;

     $query = $db -> prepare("INSERT INTO images (user_id, image, description, type, title, size, category) 
    VALUES (?, ?, ?, ?, ?, ?, ?)");
    $query -> bind_param('issssis', $_SESSION['user_id'], $imageName, $imageDescription, $imageType, $imageTitle, $imageSize, $imageCategory);
    $query -> execute();
    $query -> close();          

 if ($imageName){
        move_uploaded_file($image, $path);
        }   
}
}
?>

i tested this code and its generating image information in each cycle of loop. Can you share your move_uploaded_file($image, $path) method. — Purushotam Thakur, Mar 12 '16 at 18:43
Select multiple image from same folder in one time and you will get count of image instead of its name! — Purushotam Thakur, Mar 13 '16 at 04:36

score 0 · Answer 2 · edited Mar 12 '16 at 18:04

0

Use this one

<?php
$path = "images/projects/";
include("check.php");
if (isset($_POST["submit"])) {
     for ($i = 0; $i < count($imageName); $i++) {
        $image = $_FILES["image"]["tmp_name"][$i];
        $imageName = $_FILES["image"]["name"][$i];
        $imageSize = $_FILES["image"]["size"][$i];
        $imageType = $_FILES["image"]["type"][$i];
        $imageTitle = $_POST["picname"];
        $imageDescription = $_POST["picdesc"];
        $imageCategory = $_POST["piccat"];
        $path = $path . $imageName;

        $query = $db -> prepare("INSERT INTO images (user_id, image, description, type, title, size, category) 
        VALUES (?, ?, ?, ?, ?, ?, ?)");
        $query -> bind_param('issssis', $_SESSION['user_id'], $imageName, $imageDescription, $imageType, $imageTitle, $imageSize, $imageCategory);
        $query -> execute();
        $query -> close();          

    if ($imageName){
            move_uploaded_file($image, $path);
            }   
}
}
?>

edited Mar 12 '16 at 18:04

Purushotam Thakur

459
9
17

answered Mar 12 '16 at 17:42

Elina

43
7

I did this one, but it's still the same ... no option for uploading more than one image and also this: Notice: Array to string conversion in ... on line 17 Notice: Array to string conversion in ... on line 17 Warning: move_uploaded_file() expects parameter 1 to be string, array given in ... on line 21 – Elina Mar 12 '16 at 18:07
@Purushotam says: use `$_FILES["image"]["name"]` instead of `$imageName`. This works without showing any error! Can you share your `move_uploaded_file()` function code? – Barett Mar 12 '16 at 19:03
Oh yes it's working now with no mistakes but I still can't see the option for multiple image upload... here what it looks like: https://drive.google.com/file/d/0B9x_thwSvLRvV2JMRnQtZjY4NFU/view?usp=sharing so I can only select one file ... – Elina Mar 12 '16 at 19:33

score 0 · Answer 3 · answered Nov 13 '19 at 08:05

<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>


<script>

        //var myDropzone = new Dropzone("div#myId", { url: "/file/post" });
        Dropzone.options.myDropzone = {
            url: '#',
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 5,
            maxFiles: 5,
            maxFilesize: 1,
            acceptedFiles: 'image/*',
            addRemoveLinks: true,
            init: function () {
                dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

                // for Dropzone to process the queue (instead of default form behavior):
                document.getElementById("submit-all").addEventListener("click", function (e) {
                    // Make sure that the form isn't actually being sent.
                    e.preventDefault();
                    e.stopPropagation();
                    dzClosure.processQueue();
                });              

                this.on("addedfile", function (file) {
                    alert("addedfile");

                    //file.previewElement.querySelector(".start").onclick = function () { myDropzone.enqueueFile(file); };
                });
                this.on("totaluploadprogress", function (progress) {
                    alert("totaluploadprogress");
                    //document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
                });
                this.on("sending", function (file, xhr, formData, gid) {
                    alert("sending");
                    //formData.append("gid", $('#gid').val());
                    //document.querySelector("#total-progress").style.opacity = "1";
                    //file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
                });
                this.on("queuecomplete", function (progress) {
                    alert("queuecomplete");
                    //document.querySelector("#total-progress").style.opacity = "0";
                });               
            }
        }


    </script>

<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">

 <form action="#" class="dropzone-area" enctype="multipart/form-data" method="POST">
 <div class="dropzone" id="myDropzone"></div>
 <div class="dz-message">Drop Files Here To Upload</div>
 <button type="submit" class="btn btn-outline-primary" id="submit-all"> upload </button>
</form>

score -1 · Answer 4 · answered Oct 04 '19 at 13:26

<div>
    <div id="dropTarget" style="width: 100%; height: 100px; border: 1px #ccc solid; padding: 10px;">Drop some files here</div>
    <output id="filesInfo"></output>

    <form enctype="multipart/form-data" method="post" action="upload.php">
        <div class="row">
            <label for="fileToUpload">Select Files to Upload</label><br />
            <input type="file" name="filesToUpload[]" id="filesToUpload" multiple="multiple" />
            <output id="filesInfo"></output>
        </div>
        <div class="row">
            <input type="submit" value="Upload" />
        </div>
    </form>
</div>
<script>
    function fileSelect(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        if (window.File && window.FileReader && window.FileList && window.Blob) {
            var files = evt.dataTransfer.files;
            var div = document.createElement('div');
            var result = '';
            var file;
            for (var i = 0; file = files[i]; i++) {
                if (!file.type.match('image.*')) {
                    continue;
                }

                reader = new FileReader();
                reader.onload = (function (tFile) {
                    return function (evt) {
                        var div = document.createElement('div');
                        div.innerHTML = '<img style="width: 90px;" src="' + evt.target.result + '" />';
                        document.getElementById('filesInfo').appendChild(div);
                    };
                }(file));
                reader.readAsDataURL(file);
            }
        } else {
            alert('The File APIs are not fully supported in this browser.');
        }
    }

    function dragOver(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        evt.dataTransfer.dropEffect = 'copy';
    }

    var dropTarget = document.getElementById('dropTarget');
    dropTarget.addEventListener('dragover', dragOver, false);
    dropTarget.addEventListener('drop', fileSelect, false);

</script>

Multiple image upload

4 Answers4

Linked