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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    911
    Thanks
    302
    Thanked 2 Times in 2 Posts

    Question Multiple Upload Using PHP/Ajax

    Hi

    I am trying to populate new FILE elements on the fly using javascript. I am able to do it but I cannot retrieve the attachment file names when I click on submit. Can you please help me with this?


    Thanks


    Code:
    <html>
    <head>
    
      
      <script>
    
      function addElement() 
      {
      var ni = document.getElementById('myDiv');
      var numi = document.getElementById('theValue');
      var num = (document.getElementById('theValue').value -1)+ 2;
      numi.value = num;
      var newdiv = document.createElement('file');
      var divIdName = 'my'+num+'Div';
      newdiv.setAttribute('id',divIdName);
      newdiv.innerHTML = '<input name="name"   type="file" id=""/>';
      ni.appendChild(newdiv);
    }
      </script>
    </head>
    <body>
      <?php 
      
      if($_POST['submit']=='submit'){
      	foreach($_FILES['name'] as $x){
    		echo $x . '<BR>';
    	}
      }
      
      ?>
    <form method="post" enctype="multipart/form-data">
      <input type="hidden" value="0" id="theValue" />
    <p><a href="javascript:;" onClick="addElement();">Add Some Elements</a></p>
    <div id="myDiv"><input name="name"   type="file" id=""/> </div>
    <input type="submit" name="submit" value="submit">
    </form>
    </body>
    </html>

  • #2
    Regular Coder bacterozoid's Avatar
    Join Date
    Jun 2002
    Location
    USA
    Posts
    490
    Thanks
    24
    Thanked 35 Times in 35 Posts
    This is actually a JavaScript/HTML problem.

    You cannot give two elements the same name in a form (except for radio button and checkbox lists).

    When you add new elements, you name them "name". When that form posts, it uses that name to send the data. Simply generate a unique name for each new input field you add and you should be fine.

  • #3
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    911
    Thanks
    302
    Thanked 2 Times in 2 Posts
    Not sure what you are saying. I got that code from teh internet soemwhere and I cant get to run it. I am new to ajax


    Pls help

  • #4
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    here you go:

    Code:
    <html>
    <head>
    
      
      <script>
    
      function addElement() 
      {
      var ni = document.getElementById('myDiv');
      var numi = document.getElementById('theValue');
      var num = (document.getElementById('theValue').value -1)+ 2;
      numi.value = num;
      var newdiv = document.createElement('file');
      var divIdName = 'my'+num+'Div';
      newdiv.setAttribute('id',divIdName);
      newdiv.innerHTML = '<input type="file" name="uploadFile_'+num+'" />';
      ni.appendChild(newdiv);
    }
      </script>
    </head>
    <body>
    <?
    if($_POST['submit']=='submit'){
    	$uploadsNeeded = $_POST['theValue'];
    	for($i = 0; $i <= $uploadsNeeded;){
    		echo $_FILES['uploadFile_'. $i]['name'] . "<br />";
    		 $i++;
    	}
    }
    ?>
    <form method="post" enctype="multipart/form-data">
    <input type="text" value="0" name="theValue" id="theValue" />
    <p><a href="javascript:;" onClick="addElement();">Add Some Elements</a></p>
    <div id="myDiv"><input type="file" name="uploadFile_0" /></div>
    <input type="submit" name="submit" value="submit">
    </form>
    </body>
    </html>

  • #5
    Regular Coder bacterozoid's Avatar
    Join Date
    Jun 2002
    Location
    USA
    Posts
    490
    Thanks
    24
    Thanked 35 Times in 35 Posts
    Edit: angst provided you some code. Make sure you understand my explanation below or you'll run into more trouble in the future.

    When you submit an HTML form, you access the data in PHP by using $_POST['elementName'] where elementName is the name attribute of that field.

    So, if I had:

    Code:
    <input name="foo" type="text"/>
    In PHP, I would get the value of that element using $_POST['foo'].

    Now consider if I had

    Code:
    <input name="foo" type="text"/>
    <input name="foo" type="text"/>
    <input name="foo" type="text"/>
    <input name="foo" type="text"/>
    What value would I get when I used $_POST['foo']? Who knows!

    You need to make sure your inputs have different names.

    This line is the problem. You need to figure out a way to make a unique name for every input element.

    Code:
    newdiv.innerHTML = '<input name="name"   type="file" id=""/>';

  • #6
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    911
    Thanks
    302
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by bacterozoid View Post
    Edit: angst provided you some code. Make sure you understand my explanation below or you'll run into more trouble in the future.

    When you submit an HTML form, you access the data in PHP by using $_POST['elementName'] where elementName is the name attribute of that field.

    So, if I had:

    Code:
    <input name="foo" type="text"/>
    In PHP, I would get the value of that element using $_POST['foo'].

    Now consider if I had

    Code:
    <input name="foo" type="text"/>
    <input name="foo" type="text"/>
    <input name="foo" type="text"/>
    <input name="foo" type="text"/>
    What value would I get when I used $_POST['foo']? Who knows!

    You need to make sure your inputs have different names.

    This line is the problem. You need to figure out a way to make a unique name for every input element.

    Code:
    newdiv.innerHTML = '<input name="name"   type="file" id=""/>';


    Thanks but can ya pls post the whole code? I cant seem to fix it




    Thanks

  • #7
    Regular Coder bacterozoid's Avatar
    Join Date
    Jun 2002
    Location
    USA
    Posts
    490
    Thanks
    24
    Thanked 35 Times in 35 Posts
    Angst gave you the code above my post.

  • #8
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    I posted working code above ^^^

  • #9
    Senior Coder kbluhm's Avatar
    Join Date
    Apr 2007
    Location
    Philadelphia, PA, USA
    Posts
    1,509
    Thanks
    3
    Thanked 258 Times in 254 Posts
    There is no need to parse names such as uploadFile_0, uploadFile_1, uploadFile_2, etc.

    Just give all the inputs the same name with square brackets: uploadFile[], and it will be received as an array.

  • #10
    Regular Coder bacterozoid's Avatar
    Join Date
    Jun 2002
    Location
    USA
    Posts
    490
    Thanks
    24
    Thanked 35 Times in 35 Posts
    That's a good point! I'd forgotten you can do that (I hardly ever need to).

  • #11
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    911
    Thanks
    302
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by angst View Post
    here you go:

    Code:
    <html>
    <head>
    
      
      <script>
    
      function addElement() 
      {
      var ni = document.getElementById('myDiv');
      var numi = document.getElementById('theValue');
      var num = (document.getElementById('theValue').value -1)+ 2;
      numi.value = num;
      var newdiv = document.createElement('file');
      var divIdName = 'my'+num+'Div';
      newdiv.setAttribute('id',divIdName);
      newdiv.innerHTML = '<input type="file" name="uploadFile_'+num+'" />';
      ni.appendChild(newdiv);
    }
      </script>
    </head>
    <body>
    <?
    if($_POST['submit']=='submit'){
    	$uploadsNeeded = $_POST['theValue'];
    	for($i = 0; $i <= $uploadsNeeded;){
    		echo $_FILES['uploadFile_'. $i]['name'] . "<br />";
    		 $i++;
    	}
    }
    ?>
    <form method="post" enctype="multipart/form-data">
    <input type="text" value="0" name="theValue" id="theValue" />
    <p><a href="javascript:;" onClick="addElement();">Add Some Elements</a></p>
    <div id="myDiv"><input type="file" name="uploadFile_0" /></div>
    <input type="submit" name="submit" value="submit">
    </form>
    </body>
    </html>


    HI

    Thanks but the code does not work.

    When I click on submit, it submits the form but nothing echos on the screen.

  • #12
    Senior Coder kbluhm's Avatar
    Join Date
    Apr 2007
    Location
    Philadelphia, PA, USA
    Posts
    1,509
    Thanks
    3
    Thanked 258 Times in 254 Posts
    Are you attempting to debug it? You can't just say it's not working and leave it at that, let's have a bit if give and take here.

    Did you do a var_dump() or print_r() on $_POST and $_FILES, and if so what is the result?

  • #13
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    911
    Thanks
    302
    Thanked 2 Times in 2 Posts
    Hey

    I was wondering if there is anyway I can add a "Remove" button for each upload field?

  • #14
    Regular Coder
    Join Date
    Dec 2006
    Location
    In the wilderness
    Posts
    106
    Thanks
    9
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by cancer10 View Post
    HI

    Thanks but the code does not work.

    When I click on submit, it submits the form but nothing echos on the screen.
    This works for me, slightly changed

    PHP Code:
    <html>
    <head>

      
      <script>

      function addElement() 
      {
      var ni = document.getElementById('myDiv');
      var numi = document.getElementById('theValue');
      var num = (document.getElementById('theValue').value -1)+ 2;
      numi.value = num;
      var newdiv = document.createElement('file');
      var divIdName = 'my'+num+'Div';
      newdiv.setAttribute('id',divIdName);
      newdiv.innerHTML = '<input type="file" name="uploadFile_'+num+'" />';
      ni.appendChild(newdiv);
    }
      </script>
    </head>
    <body>
    <?
    if(isset($_POST['submit'])){
        
    $dir 'images/'// upload directory
        
        
    $uploadsNeeded $_POST['theValue'];
        for(
    $i 0$i <= $uploadsNeeded;){
            
    move_uploaded_file($_FILES["uploadFile_".$i]["tmp_name"],
          
    $dir $_FILES["uploadFile_".$i]["name"]); // upload file
            
    echo "<img src=\"".$dir.$_FILES['uploadFile_'$i]['name'] ."\" />"// display
             
    $i++;
        }
    }
    ?>
    <form method="post" enctype="multipart/form-data">
    <input type="text" value="0" name="theValue" id="theValue" />
    <p><a href="javascript:;" onClick="addElement();">Add Some Elements</a></p>
    <div id="myDiv"><input type="file" name="uploadFile_0" /></div>
    <input type="submit" name="submit" value="submit">
    </form>
    </body>
    </html>
    "The advantage of computers is that they do exactly what you tell them to do. The disadvantage of computers, on the other hand, is that they do exactly what you tell them to do."

    Excellent resource for learning PHP here

  • #15
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    911
    Thanks
    302
    Thanked 2 Times in 2 Posts
    I was wondering if there is anyway I can add a "Remove" button for each upload field?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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