Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    41
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Multiple Image Uploads to Database

    I'm working on a program to upload images to a database and I got it to work perfectly! My users are able to choose a file, upload an image and then view the image on their profile. After I finished I realized my only option of allowing one upload at a time was not exactly convenient so I decided the young program needed a remodel. I need to allow users to upload multiple images all at once.

    So I figured out how to create a dynamic form that will allow users to continue to add fields until they are content, but now I have no idea how to create the loop I need to cypher through the files and put each one in it's own column in my database. For example, if I try to do multiple uploads now, lets say 3 images, my program will take the last image, upload it to the database, and ignore the first two.

    I'm guessing I will need a for loop but I need a bit of help because this is a bit over my head. So again, form works great, all validation checking works great, and my connection to my database works great! I just need some help with what I'm guessing will be a for loop to grab those files individually and place them in my database! Thank you for reading code is below!

    User Upload Form:
    PHP Code:
    <script>
    function addFile(addFileButton) 
        {
            var form = document['uploadform'];
            
            var f = document.createElement("input");
            f.type="file";
            f.name="picture";
            
            var rb = document.createElement("input");
            rb.type="button";
            rb.value="Remove File";
            rb.onclick = function () 
            {
                form.removeChild(this.previousSibling);
                form.removeChild(this.nextSibling);
                form.removeChild(this);
            }
            form.insertBefore(f, addFileButton);
            form.insertBefore(rb, addFileButton);
            form.insertBefore(document.createElement("br"), addFileButton);
        }
    </script>
    <form action="upload.php" method="post" enctype="multipart/form-data" name="uploadform">
    <div style="display:none;"><input name="user_id" value="<?php echo $mngl_user->id?>" type="text" id="user_id" size="25"></div>
    <input name="picture" type="file" id="picture" size="20"  /><br />
    <input type="button" name="addFile" value="Add more files" onClick="window.addFile(this)" />
    <input type="submit" value="Upload" name="upload" />
    </form>
    upload.php

    PHP Code:
    <style>
    A:visited { color: #3B5998; }
    A:link { color: #3B5998; text-decoration: none}
    A:visited {text-decoration: none}
    A:hover {color:#000000;;}
    </style>

    <?php
    // if something was posted, start the process...
    if(isset($_POST['upload']))
    {

    // define the posted file into variables
    $name $_FILES['picture']['name'];
    $tmp_name $_FILES['picture']['tmp_name'];
    $type $_FILES['picture']['type'];
    $size $_FILES['picture']['size'];


    // get the width & height of the file (we don't need the other stuff)
    list($width$height$typeb$attr) = getimagesize($tmp_name);
        
    // if width is over 1000 px or height is over 1000 px, kill it    
    if($width>1000 || $height>1000)
    {
    echo 
    $name "'s dimensions exceed the 1000x1000 pixel limit.";
    ?> <a href="form.html">Click here</a> to try again. <? 
    die();
    }

    // if the mime type is anything other than what we specify below, kill it    
    if(!(
    $type=='image/jpeg' ||
    $type=='image/jpg' ||
    $type=='image/bmp' ||
    $type=='image/png' 
    )) {
    echo 
    $type .  " is not an acceptable format.";
    ?> <a href="form.html">Click here</a> to try again. <? 
    die();
    }

    // if the file size is larger than 350 KB, kill it
    if($size>'350000') {
    echo 
    $name " is over 350KB. Please make it smaller.";
    ?> <a href="form.html">Click here</a> to try again. <? 
    die();


    // if your server has magic quotes turned off, add slashes manually
    if(!get_magic_quotes_gpc()){
    $name addslashes($name);
    }

    // open up the file and extract the data/content from it
    $extract fopen($tmp_name'r');
    $content fread($extract$size);
    $content addslashes($content);
    fclose($extract);  

    $user_id $_POST['user_id'];
    $image_title $_POST['image_title'];

    // connect to the database
    include "connect.php";

    // the query that will add this to the database
    $addfile "INSERT INTO files (name, size, type, content, mngl_id, width, image_title) ".
               
    "VALUES ('$name', '$size', '$type', '$content' , '$user_id' , '$width', '$image_title')";

    mysql_query($addfile) or die(mysql_error());

    // get the last inserted ID if we're going to display this image next
    $inserted_fid mysql_insert_id();

    mysql_close(); 

    // display the image
    ?>
    <div align="center">
        <strong><? echo $name?><br>
        </strong><img name="<? echo $name?>" src="getpicture.php?fid=<? echo $inserted_fid?>" alt="Unable to view image #<? echo $inserted_fid?>">
        <br>
        <a href="http://www.instride.info/profile">Back to profile!</a>
    </div>
    <?
    // we still have to close the original IF statement. If there was nothing posted, kill the page.
    }else{die("No uploaded file present");
    }
    ?>

  • #2
    New Coder
    Join Date
    Feb 2012
    Posts
    40
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Not sure if the increment is correct for the javascript,any how try this out:

    Change your javascript and html to:

    Code:
    <script> 
    function addFile(addFileButton)  
        { 
            var form = document['uploadform']; 
            var i = 1;
            var f = document.createElement("input"); 
            f.type="file"; 
            f.name="picture" + i++; 
             
            var rb = document.createElement("input"); 
            rb.type="button"; 
            rb.value="Remove File"; 
            rb.onclick = function ()  
            { 
                form.removeChild(this.previousSibling); 
                form.removeChild(this.nextSibling); 
                form.removeChild(this); 
            } 
            form.insertBefore(f, addFileButton); 
            form.insertBefore(rb, addFileButton); 
            form.insertBefore(document.createElement("br"), addFileButton); 
        } 
    </script>
    
    
    <form action="upload.php" method="post" enctype="multipart/form-data" name="uploadform"> 
    <div style="display:none;"><input name="user_id" value="<?php echo $mngl_user->id; ?>" type="text" id="user_id" size="25"></div> 
    <input name="picture" type="file" id="picture1" size="20"  /><br /> 
    <input type="button" name="addFile" value="Add more files" onClick="window.addFile(this)" /> 
    <input type="submit" value="Upload" name="upload" /> 
    </form>
    then your php to something like this (basically with incremnting the file field name in the form you can access each file by it's on incrmenter:
    PHP Code:
    <?php
    for ($i 1$i <= 5$i++) {
         echo 
    "Name of file is "$_FILES["picture$i"]['name'];
         
    //do a whole bunch cool sh!t here
    }
    ?>

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    41
    Thanks
    6
    Thanked 0 Times in 0 Posts
    so in relation to my php code where would your for loop go exactly? I tried placing it here

    PHP Code:
    if(isset($_POST['upload']))
    {
        
    for (
    $i 1$i <= 5$i++) {
         echo 
    "Name of file is "$_FILES["picture$i"]['name'];


    // define the posted file into variables
    $name $_FILES['picture']['name'];
    $tmp_name $_FILES['picture']['tmp_name'];
    $type $_FILES['picture']['type'];
    $size $_FILES['picture']['size']; 
    and that resulted in the first image getting uploaded 5 times but no 2nd image. Where should my for loop be placed and closing brace? thank you for helping me.
    Last edited by ccarrin2; 02-22-2012 at 03:08 AM.

  • #4
    Regular Coder
    Join Date
    Apr 2004
    Posts
    298
    Thanks
    0
    Thanked 23 Times in 23 Posts


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •