HTML Help
HTML Help Central . com

» Online Users: 38

0 members and 38 guests
No Members online
Most users ever online was 695, 02-16-2011 at 08:01 AM.

» Site Navigation

 > FAQ

» Domains For Sale

Results 1 to 13 of 13
  1. #1

    Upload multiple files in form

    This forum was so helpful with my last PHP question, I thought I'd give it another shot!

    Using PHP, what is the best method to allow a user to upload files one at a time prior to completing a form?

    Here is how I visualize:

    1. User clicks Browse and selects file
    2. User clicks upload and file uploads
    3. Page shows newly uploaded file
    4. User can click Browse to upload another file or Finish to submit the completed form

    So far, i only know how to create more than one file input field ahead of time, limiting the user to upload 5 or less files at the same time, for example.

    Thanks in advance.

  2. #2
    Join Date
    Mar 2005
    Location
    Singapore
    Posts
    1,766
    Your requirement #3: Page shows newly uploaded file, may require you to use AJAX if you do not want the page to reload. It is possible to have a button in your existing page to dynamically add more upload fields if the user needs it.

  3. #3
    So with AJAX I could add a button to add more upload fields?

    Is there a good user group to research how this could be done?

  4. #4
    Join Date
    Mar 2005
    Location
    Singapore
    Posts
    1,766
    No, you do not need AJAX to add more fields. As long as the server-side script supports multiple uploads, you can write a JavaScript function to add more fields on the client side using a button.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    //<![CDATA[
    function dothat() {
       var div = document.getElementById('fileuploads');
    	var field = div.getElementsByTagName('input')[0];
    	
    	div.appendChild(document.createElement("br"));
    	div.appendChild(field.cloneNode(false));
    }
    //]]>
    </script>
    </head>
    
    <body>
    <form action="" method="post">
    	<div id="fileuploads">
    		<input type="file" name="fileField" id="fileField" />
    	</div>
    	<input type="button" name="addmore" id="addmore" value="Add More" onClick="dothat();" />
    	<input type="submit" name="button" id="button" value="Submit" />
    </form>
    </body>
    </html>
    Last edited by samliew; 05-22-2010 at 02:45 AM.

  5. #5
    that code works great.

    I'm a little stumped on how to modify my processing code to dynamically adjust to upload more than one file. I'm guessing that the additional upload fields are appended with 1, then 2, etc?

    PHP Code:
    <?php
    if ((($_FILES["file"]["type"] == "image/gif")
    || (
    $_FILES["file"]["type"] == "image/jpeg")
    || (
    $_FILES["file"]["type"] == "image/pjpeg"))
    && (
    $_FILES["file"]["size"] < 20000))
      {
      if (
    $_FILES["file"]["error"] > 0)
        {
        echo 
    "Return Code: " $_FILES["file"]["error"] . "<br />";
        }
      else
        {
        echo 
    "Upload: " $_FILES["file"]["name"] . "<br />";
        echo 
    "Type: " $_FILES["file"]["type"] . "<br />";
        echo 
    "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
        echo 
    "Temp file: " $_FILES["file"]["tmp_name"] . "<br />";

        if (
    file_exists("." $_FILES["file"]["name"]))
          {
          echo 
    $_FILES["file"]["name"] . " already exists. ";
          }
        else
          {
          
    move_uploaded_file($_FILES["file"]["tmp_name"],
          
    "./tester_files/" $_FILES["file"]["name"]);
          echo 
    "Stored in: " "/tester_files/" $_FILES["file"]["name"];
          
    $filename $_FILES["file"]["name"];
          }
        }
      }
    else
      {
      echo 
    "Invalid file";
      }
    ?>

  6. #6
    Join Date
    Aug 2003
    Posts
    1,464
    PHP Code:
    <?php
    if( !empty( $_FILES ) )
    {
      foreach( 
    $_FILES as $index => $data )
      {
        
    // strut your stuff, $data == $_FILES['foo'] && $index == 'foo' ;)
    *edit
    Don't forget to sanitise your data

    Last edited by ; 05-24-2010 at 02:01 PM.
    I may have opened the door, but you entered of your own free will
    Blog - Spam Trap -Blogrums

  7. #7
    I must be out of my league for how this is done. I wrapped your code around the original code, but it's still only uploading the first file.

    yes, once i have this working, I'll add sanitation statements.

    PHP Code:
    <?php

    if( !empty( $_FILES ) ) 

      foreach( 
    $_FILES as $index => $data 
      { 
    if (((
    $_FILES["file"]["type"] == "image/gif")
    || (
    $_FILES["file"]["type"] == "image/jpeg")
    || (
    $_FILES["file"]["type"] == "image/pjpeg"))
    && (
    $_FILES["file"]["size"] < 20000))
      {
      if (
    $_FILES["file"]["error"] > 0)
        {
        echo 
    "Return Code: " $_FILES["file"]["error"] . "<br />";
        }
      else
        {
        echo 
    "Upload: " $_FILES["file"]["name"] . "<br />";
        echo 
    "Type: " $_FILES["file"]["type"] . "<br />";
        echo 
    "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
        echo 
    "Temp file: " $_FILES["file"]["tmp_name"] . "<br />";

        if (
    file_exists("." $_FILES["file"]["name"]))
          {
          echo 
    $_FILES["file"]["name"] . " already exists. ";
          }
        else
          {
          
    move_uploaded_file($_FILES["file"]["tmp_name"],
          
    "./tester_files/" $_FILES["file"]["name"]);
          echo 
    "Stored in: " "/tester_files/" $_FILES["file"]["name"];
          
    $filename $_FILES["file"]["name"];
          }
        }
      }
    else
      {
      echo 
    "Invalid file";
      }

      }
    }
    ?>

  8. #8
    also - how i would i modify the javascript so that the entire row is duplicated (including both drop-downs), instaed of just duplicating the browse button. I will start my javascript tutorials soon, but for now I'm booked pretty solid with just learning php and mySQL.

    http://www.einstructiontx.com/tester_form.php

    Form is disabled until I sanitize!

  9. #9
    awesome! I fixed it so i can upload multiple files. I have ot change a few things on my processing doc so it is a little more dynamic. right now, the processing for each file in the array is coded manually, limited to 3.

    http://www.einstructiontx.com/tester_form.php
    http://www.einstructiontx.com/tester_processor.php

    I'm still stuck on how to duplicate the entire row on the form, not just the Browse input field.

  10. #10
    I have successfully updated my processing form to utilize a for count so it can dynamically process as many uploads as needed without tons of code.

    just i just need to learn how to duplicate the whole row on the form when Add More is clicked, instead of just the Browse input field.

    onward and upward! I feel like celebrating!

    Thanks everyone for your input. I couldn't have made it this far without your help. I hope to be able to give back as much as I have been given.

  11. #11
    Join Date
    Apr 2005
    Location
    Upland, CA
    Posts
    1,031
    I remember playing with a script very similar to that, It was always pretty worthless and i never pursued it any further i found it here:

    http://www.w3schools.com/PHP/php_file_upload.asp

    PS there is a non Ajax way to add fields to the form as well, But it requires a refresh of the page, There are also a few other ways like Java, Flash and Flex flex being actionscript based.
    Last edited by Chris; 06-09-2010 at 01:44 AM.
    Chris

    Computers are like Air Conditioners..
    Once you open windows they both stop working.
    Updated Links

    My Blog | MadReligion | My facebook | Twitter

    Windows has Written There Code to fail!! Save YourSelf.. Go Linux!!

  12. #12
    Chris, I ended up going with Javascript and PHP that doesn't require a page reload. I'm starting to learn Flash, so maybe i'll get into form processing that way.

    If you need any copies of code or help, please let me know. You can even pay me if you want! just kidding.

  13. #13
    Join Date
    Apr 2005
    Location
    Upland, CA
    Posts
    1,031
    I really think that Flex and Flash make for the best multiple file upload forms..
    Chris

    Computers are like Air Conditioners..
    Once you open windows they both stop working.
    Updated Links

    My Blog | MadReligion | My facebook | Twitter

    Windows has Written There Code to fail!! Save YourSelf.. Go Linux!!

Similar Threads

  1. Complex PHP Upload Form
    By Billy in forum Other Languages ( ASP / Perl / Python / TCL / Ruby / ColdFusion / etc)
    Replies: 7
    Last Post: 10-12-2005, 03:39 PM
  2. PHP Upload Form
    By Chris in forum Other Languages ( ASP / Perl / Python / TCL / Ruby / ColdFusion / etc)
    Replies: 30
    Last Post: 08-27-2005, 09:46 AM
  3. Ability for Users to Upload files to Server Within Website
    By Kristine in forum HTML / XHTML / XML
    Replies: 2
    Last Post: 11-12-2004, 10:55 AM
  4. how do i upload wave files onto my web site?
    By minstrelite in forum HTML / XHTML / XML
    Replies: 4
    Last Post: 09-04-2004, 01:43 PM
  5. Upload files to web server rather than local PC?
    By starla in forum Other Languages ( ASP / Perl / Python / TCL / Ruby / ColdFusion / etc)
    Replies: 3
    Last Post: 07-22-2004, 07:10 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Powered by vBadvanced CMPS v4.1.1