2

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?

Improve this question
3

4 Answers 4

Reset to default
3

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); } } } ?>
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

i tested this code and its generating image information in each cycle of loop. Can you share your move_uploaded_file($image, $path) method.
Select multiple image from same folder in one time and you will get count of image instead of its name!
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); } } } ?>
Improve this answer

3 Comments

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
@Purushotam says: use $_FILES["image"]["name"] instead of $imageName. This works without showing any error! Can you share your move_uploaded_file() function code?
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: drive.google.com/file/d/0B9x_thwSvLRvV2JMRnQtZjY4NFU/… so I can only select one file ...
0 

<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>

Improve this answer

Comments

-1 

<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>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.