[SOLVED] Help

[aznkidzx]

Hello! I have this image script. I am just wondering if I could allow them to add more images to upload. I tried it but I had some difficulties and it only uploaded the first image browsed. I want it so like if someone finished browsing an image, BEFORE they upload, they have another option like Upload Another Image that makes another form field appear. Can somebody help me?

 

Heres the script

<?php
//define a maxim size for the uploaded images in Kb
define ("MAX_SIZE","2048"); 

//This function reads the extension of the file. It is used to determine if the file  is an image by checking the extension.
function getExtension($str) {
         $i = strrpos($str,".");
         if (!$i) { return ""; }
         $l = strlen($str) - $i;
         $ext = substr($str,$i+1,$l);
         return $ext;
}

//This variable is used as a flag. The value is initialized with 0 (meaning no error  found)  
//and it will be changed to 1 if an errro occures.  
//If the error occures the file will not be uploaded.
$errors=0;
//checks if the form has been submitted
if(isset($_POST['Submit'])) 
{
    //reads the name of the file the user submitted for uploading
    $image=$_FILES['image']['name'];
    //if it is not empty
    if ($image) 
    {
    //get the original name of the file from the clients machine
       $filename = stripslashes($_FILES['image']['name']);
    //get the extension of the file in a lower case format
        $extension = getExtension($filename);
       $extension = strtolower($extension);
    //if it is not a known extension, we will suppose it is an error and will not  upload the file,  
   //otherwise we will do more tests
if (($extension != "jpg") && ($extension != "jpeg") && ($extension != "png") && ($extension != "gif")) 
       {
      //print error message
          echo '<h1>Unsupported file extension!</h1>';
          $errors=1;
       }
       else
       {
//get the size of the image in bytes
//$_FILES['image']['tmp_name'] is the temporary filename of the file
//in which the uploaded file was stored on the server
$size=filesize($_FILES['image']['tmp_name']);

//compare the size with the maxim size we defined and print error if bigger
if ($size > MAX_SIZE*2048)
{
   echo '<h1>You have exceeded the size limit!</h1>';
   $errors=1;
}

//we will give an unique name, for example the time in unix time format
$image_name=time().'.'.$extension;
//the new name will be containing the full path where will be stored (images folder)
$newname="images/".$image_name;
//we verify if the image has been uploaded, and print error instead
$copied = copy($_FILES['image']['tmp_name'], $newname);
if (!$copied) 
{
   echo '<h1>Copy unsuccessfull!</h1>';
   $errors=1;
}}}}

//If no errors registred, print the success message
if(isset($_POST['Submit']) && !$errors) 
{
    echo "<h1>File Uploaded Successfully!</h1>";
        echo "You can find your file <a href='" . $newname . "'>here</a>";
}

?>

<!--next comes the form, you must set the enctype to "multipart/frm-data" and use an input type "file" -->
<form name="newad" method="post" enctype="multipart/form-data"  action="">
<table>
    <tr><td><input type="file" name="image"></td></tr>

    <tr><td><input name="Submit" type="submit" value="Upload image"></td></tr>
</table>   
</form>
</div>

[webster08]

try this (you can convert this to be more DOM efficient; if you would like, but this will get the job done):

 

<script type="text/javascript">
var count = 1;
function more()
{
count = count + 1;
document.getElementById("morefiles").innerHTML += "\n<input type=\"file\" name=\"image"+ count +"\" style=\"display:block;margin-top:10px\">";
}
</script>

<form name="newad" method="post" enctype="multipart/form-data"  action="">
<table>
    <tr><td><input type="file" name="image"><span id="morefiles"></span></td></tr>

    <tr><td><input type="button" value="Upload More Files" onclick="more()"> <input name="Submit" type="submit" value="Upload image"></td></tr>
</table>   
</form>

[aznkidzx]

Doesn't work ;\ 4get it Ty anyways

[webster08]

it does work; i tested it FF & IE - works perfectly. if your php is not working; that has nothing to do with the function i just wrote; which does accomplish what you were wanting to do. it does allow you to add more file fields.

[Psycho]

Well, it does and doesn't work. It does work to add a new input row, but it will be completely unusable because it does not modify the field name so each field comes across correctly. You could either change the field name to be unique OR create the field name as an array so the PHP code can handle it more efficiently.

 

I went with a slightly different solution. The following code will dynamically add a new row each time the user adds a value to the last one. You will need to modify your PHP code to process the multiple files. Instead of a single image in the variable $_FILES['image'], you will get an array of images in the variable $_['files']. So you would want to do a foreach loop on it.

 

<script type="text/javascript">
function addImageField(fieldObj)
{
    var formObj = document.getElementById('newad');
    var imgInput = formObj.elements['image[]'];
    var lastField = (imgInput.length) ? imgInput[imgInput.length-1] : imgInput;

    if (lastField.value)
    {
        var tableObj = document.getElementById('formTable');
        var imageRowObj = document.getElementById('imgInputRow');
        inputObj = document.createElement(imageRowObj.innerHTML);

        var newRow  = tableObj.insertRow(tableObj.rows.length-1);
        var newCell = newRow.insertCell(0);
        newCell.appendChild(inputObj);
    }
}

</script>

 <form name="newad2" id="newad" method="post" enctype="multipart/form-data"  action="">
<table id="formTable" border="1">
    <tr><td id="imgInputRow"><input type="file" name="image[]" onchange="addImageField(this);"></td></tr>
    <tr><td><input name="Submit" type="submit" value="Upload images"></td></tr>
</table>   
</form>

 

 

[webster08]

Well' date=' it does and doesn't work. It does work to add a new input row, but it will be completely unusable because it does not modify the field name so each field comes across correctly.[/quote']

 

this is not accurate, with my code; each field name has a unique name. try it out in FireFox. then once you add a few new fields; select all and right click and select "View Selection Source". you will then see that each field's name (that was dynamically added by my script) gets a unique number; hence each field has a different name.

 

here is an example; i used my script and added 4 new dynamic fields and here is the DOM Source Code (previous described above):

 

<html><head><script type="text/javascript">
var count = 1;
function more()
{
count = count + 1;
document.getElementById("morefiles").innerHTML += "\n<input type=\"file\" name=\"image"+ count +"\" style=\"display:block;margin-top:10px\">";
}
</script></head><body><form name="newad" method="post" enctype="multipart/form-data" action="">
<table>
    <tbody><tr><td><input name="image" type="file"><span id="morefiles">
<input name="image2" style="display: block; margin-top: 10px;" type="file">
<input name="image3" style="display: block; margin-top: 10px;" type="file">
<input name="image4" style="display: block; margin-top: 10px;" type="file">
<input name="image5" style="display: block; margin-top: 10px;" type="file"></span></td></tr>

    <tr><td><input value="Upload More Files" onclick="more()" type="button"> <input name="Submit" value="Upload image" type="submit"></td></tr>
</tbody></table>   
</form></body></html>

[webster08]

mjdamato; you also have an error in your code. so until it is corrected; it will not function anyway.

 

ERROR

 

uncaught exception: String contains an invalid character (NS_ERROR_DOM_INVALID_CHARACTER_ERR)

inputObj = document.createElement(imageRowObj.innerHTML);

[webster08]

mjdamato, your code will work in IE; but it will not work in FF (due to the above uncaught exception).