Posted by: Didik | 7 August 2010

Creating Multiple File Upload From Using Javascript and PHP

<?php
    if(isset($_POST['submit'])){
        //$files = array_values($_FILES["data"]);
        //print_r($_FILES["data"] );die();
        $count = sizeof($_FILES['data']['name']);
        for($i = 0; $i < $count; $i++){
            if ($_FILES['data']['error'][$i] != UPLOAD_ERR_OK) {
                //show error message or silently go to next file.
                echo 'File upload error ' . $_FILES['data']['error'][$i] . '.<br />';
            }else{
                //do what you want to do here...
                //eg : save file, scan it, etc.
                echo 'file ' . $_FILES['data']['name'][$i] . ' is uploaded!<br />';
            }
        }
    }
?>
<html>
  <head>
    <title>.: Multiple Upload Example :.</title>
    <script language="javascript" type="text/javascript">
        function addNewField(){
            var holder = document.getElementById('uploadholder');
            var row    = document.createElement('tr');holder.appendChild(row);
            var field  = document.createElement('td');row.appendChild(field);
                field.innerHTML = '<input type="file" name="data[]" id="" />';
        }
    </script>
  </head>
  <body>
   <form method="post" enctype="multipart/form-data">
    <table id="uploadholder">
        <!--<tr><td><input type="file" name="data[]" id="" /></td></tr>-->
    </table>
    <input type="button" name="tambah" value="Add Field" onclick="javascript:addNewField()" />
    <input type="submit" name="submit" value="submit" />
   </form>
  </body>
</html>

Deleting Table Row
<html>
<head>
<script type="text/javascript">
function deleteRow(i){
 document.getElementById('myTable').deleteRow(i)
}
</script>
</head>

<body>
<table id="myTable" border="1">
<tr>
 <td>Row 1</td>
 <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"></td>
</tr>
<tr>
 <td>Row 2</td>
 <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"></td>
</tr>
<tr>
 <td>Row 3</td>
 <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"></td>
</tr>
</table>
</body>

</html>



---------------- Versi Lain
<script language="javascript" type="text/javascript">
function addNewField(){
var x=document.getElementById('uploadholder').insertRow(4)
var a=x.insertCell(0)
var b=x.insertCell(1)
var c=x.insertCell(2)
//a.innerHTML=''
//b.innerHTML=''
c.innerHTML='<input type="file" name="data[]" id="" /> <img src="images/tidak.png" style=cursor:pointer border="0" title="Delete" onclick="javascript:deleteRow(this.parentNode.parentNode.rowIndex)"/>'
}
function deleteRow(i){ document.getElementById('uploadholder').deleteRow(i) } </script>
----------------------- Silahkan atur2 sendiri, semoga bermanfaat buat kita semua..... Salam...
Advertisement

Responses

  1. Terima kasih untuk posting yang bermanfaat! Aku tidak akan mendapatkan ini dinyatakan!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

Categories

Follow

Get every new post delivered to your Inbox.