...

View Full Version : Multiple Upload Using PHP/Ajax



phantom007
09-18-2009, 07:29 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



<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>

bacterozoid
09-18-2009, 07:38 PM
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.

phantom007
09-18-2009, 07:53 PM
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

angst
09-18-2009, 07:57 PM
here you go:



<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>

bacterozoid
09-18-2009, 07:57 PM
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:


<input name="foo" type="text"/>

In PHP, I would get the value of that element using $_POST['foo'].

Now consider if I had


<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.


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

phantom007
09-18-2009, 08:03 PM
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:


<input name="foo" type="text"/>

In PHP, I would get the value of that element using $_POST['foo'].

Now consider if I had


<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.


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



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




Thanks

bacterozoid
09-18-2009, 08:05 PM
Angst gave you the code above my post.

angst
09-18-2009, 08:05 PM
I posted working code above ^^^

kbluhm
09-18-2009, 08:42 PM
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.

bacterozoid
09-18-2009, 08:43 PM
That's a good point! I'd forgotten you can do that (I hardly ever need to). :thumbsup:

phantom007
09-19-2009, 05:01 AM
here you go:



<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.

kbluhm
09-19-2009, 05:36 AM
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?

phantom007
10-16-2009, 05:09 AM
Hey

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

karlosio
10-16-2009, 05:53 AM
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



<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>

phantom007
10-16-2009, 05:56 AM
I was wondering if there is anyway I can add a "Remove" button for each upload field?

kbluhm
10-16-2009, 07:40 AM
Yeah, that'd be possible.

phantom007
10-16-2009, 05:12 PM
Yeah, that'd be possible.

I tried to do this but in vain

document.getElementById(this);


Can you help me setting this up pls?

kbluhm
10-16-2009, 05:23 PM
There are numerous ways to accomplish this. We'll need to see your current code.

phantom007
10-16-2009, 05:42 PM
Herez my 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>
<pre>
<?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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum