Multiple Upload Using PHP/Ajax

**cancer10** · 09-18-2009, 05:28 PM

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>

**JShor** · 09-18-2009, 10:46 PM

"file" isn't recognized as an html element. You'll need to use "input" and append a "file" attribute to it.

Code:

  var newdiv = document.createElement('input');
  newdiv.setAttribute(newdiv, 'file');

**JShor** · 09-19-2009, 03:56 AM

I didn't read that carefully enough. YOu can't "re-enter" html in an existing html element. Here's a better revised bersion:

Code:

  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('input');
  var divIdName = 'my'+num+'Div';
  newdiv.setAttribute('id',divIdName);
  newdiv.setAttribute('type','file');
  newdiv.setAttribute('name','name');
  ni.appendChild(newdiv);
}

**thetestingsite** · 09-19-2009, 04:52 AM

Change the input name to name[] and see if that works for you.

Hope this helps.

**cancer10** · 09-19-2009, 06:04 AM

Yes that works

Thanks

**cancer10** · 10-16-2009, 03:10 AM

Hey

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

Thread: Multiple Upload Using PHP/Ajax

Thread Tools

Search Thread

Multiple Upload Using PHP/Ajax

Bookmarks

Bookmarks

Posting Permissions