Web development Uploading Images

Where are you stuck? Can you post what you have tried so far?  There are going to be multiple parts to your question and it is best to work on just one item at a time per question thread to keep things simple and on point.

Below is a quick outline and you can see there are about 17 different parts to work on.  The core of what you want is uploading files https://www.php.net/manual/en/features.file-upload.post-method.php and gr8gonzo has a very good, succinct solution that you can build on https://www.experts-exchange.com/questions/29201239/how-to-upload-pdf-file-and-picture-or-jpeg-png-file-to-database-using-php-and-html.html#a43199273 

1. HTML to select images.
2. Form to post (put) images to the server.
3. PHP code ->
   1. Accept the image
   2. Check that each file is what you expect (jpg, png etc and not a txt or other file type).
      1. Respond back to the user any errors.
   3. Check that each file fits within any size parameters you have set up.
      1. Respond back to the user with any errors.
      2. Or resize the image.
   4. Move the uploaded files to your images folder.
   5. Save to your database
      1. What is the database, table name and fields to be updates?
      2. Is there form data that needs to go to the database such as a description, file location, file name?
      3. Do you need to make sure the text data is clean (yes)?
      4. Do you need to make sure the text data you are saving to the database is not too long (yes)?
      5. Send any error information back to the user.
4. Let the user know the success or error information.

Note also that your 'php.ini' sets limits on the size and number of files that you can upload in a single POST request.

Hi,

I'm using Fileuploader with PHP & MySQL it is very easy to use, have nice widgets.
But it does not save image blob (in DB) (this required custom code).
I'm saving image name, size, format ect in DB and I have a copy of the file in the upload directory / per project ID
You can also save the file to  Amazon S3.

https://innostudio.de/fileuploader/documentation/#examples

Thank you all for your comments. I seem to be stuck with the form design. I would like my user to be able to upload one or up to 10 images at once. Below is my code.

<?php # Script 11.2 - upload_image.php


// Check if the form has been submitted:
if ($_SERVER['REQUEST_METHOD'] == 'POST') {


    // Check for an uploaded file:
    if (isset($_FILES['upload'])) {
       
        // Validate the type. Should be JPEG or PNG.
        $allowed = array ('image/pjpeg', 'image/jpeg', 'image/JPG', 'image/X-PNG', 'image/PNG', 'image/png', 'image/x-png');
        if (in_array($_FILES['upload']['type'], $allowed)) {
       
            // Move the file over.
            if (move_uploaded_file ($_FILES['upload']['tmp_name'], "uploads/{$_FILES['upload']['name']}")) {
                echo '<p><em>The file has been uploaded!</em></p>';
            } // End of move... IF.
           
        } else { // Invalid type.
            echo '<p class="error">Please upload a JPEG or PNG image.</p>';
        }


    } // End of isset($_FILES['upload']) IF.
   
    // Check for an error:
    if ($_FILES['upload']['error'] > 0) {
        echo '<p class="error">The file could not be uploaded because: <strong>';
   
        // Print a message based upon the error.
        switch ($_FILES['upload']['error']) {
            case 1:
                print 'The file exceeds the upload_max_filesize setting in php.ini.';
                break;
            case 2:
                print 'The file exceeds the MAX_FILE_SIZE setting in the HTML form.';
                break;
            case 3:
                print 'The file was only partially uploaded.';
                break;
            case 4:
                print 'No file was uploaded.';
                break;
            case 6:
                print 'No temporary folder was available.';
                break;
            case 7:
                print 'Unable to write to the disk.';
                break;
            case 8:
                print 'File upload stopped.';
                break;
            default:
                print 'A system error occurred.';
                break;
        } // End of switch.
       
        print '</strong></p>';
   
    } // End of error IF.
   
    // Delete the file if it still exists:
    if (file_exists ($_FILES['upload']['tmp_name']) && is_file($_FILES['upload']['tmp_name']) ) {
        unlink ($_FILES['upload']['tmp_name']);
    }
           
} // End of the submitted conditional.
?>
   
<form enctype="multipart/form-data" action="upload_image.php" method="post">


    <input type="hidden" name="MAX_FILE_SIZE" value="524288" />
   
    <fieldset><legend>Select a JPEG or PNG image of 512KB or smaller to be uploaded:</legend>
   
    <p><b>File:</b> <input type="file" name="upload" /></p>
    <p>UPLOAD IMAGE PAGE</p>
   
    </fieldset>
    <div align="center"><input type="submit" name="submit" value="Submit" /></div>


</form>

Select allOpen in new window

You need to update your input type="file" to add, "multiple" like

<input type="file" name="upload" multiple />

Select allOpen in new window

This will allow you to select multiple files.

I would look at Julian's suggestion for dropzone to give a more modern feel of dragging and dropping files as well.

Thank you. I am trying out the various suggestions.

I really like the drag and drop idea as the viewers for this particular website will not be tech savvy.

ALL of your answers were helpful and to the point.

Thank you for your quick replies.