Multiple Upload Using PHP/Ajax - Computer Programmers, Programming Forum

cancer10 · #1 09-18-2009

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>

juddster · #2 09-18-2009

Hi,

I went over your code and was able to fix it relatively easily. All you need to do, is tell HTML that each of the name elements are an 'array'.

To do this you do the following:

Change this:

Code:

<input name="name"   type="file" id=""/>

To this:

Code:

<input name="name[]"   type="file" id=""/>

For both spots where it is located in the script (in the JavaScript portion and in the HTML portion).

This will tell PHP to treat it differently...you can see what it does by using print_r ( $_FILES ); to echo out what is being stored there.

For the full script, see below.

Hope this helps,
~juddster

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 name="name[]"   type="file" id=""/>';
  ni.appendChild(newdiv);
}
  </script>
</head>
<body>
  <?php 
  
  if($_POST['submit']=='submit'){
      /*foreach($_FILES['name'] as $x){
        echo $x . '<BR>';
    }*/print_r ( $_FILES );
  }
  
  ?>
<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>