Multiple file upload with jQuery and php
Here, I am going to show you how easy it is to upload multiple files with the help of jQuery and PHP.
I suppose that you are familiar with php and apache web server.
Let our folder name be ‘test’. Let us create a file called ‘index.php’ inside test folder. Inside the ‘test’ folder, you have to make another folder named ‘uploads’. The files will be uploaded into this folder.
We need few more things. We need the jQuery js files. Download the following two files and keep inside the folder ‘test’.
http://jquery.com/src/jquery-latest.js
http://jquery-multifile-plugin.googlecode.com/svn/trunk/jquery.MultiFile.js
Below is the complete code for multiple file upload:
<?php
if(isset($_POST['upload']))
{
$uploaddir = 'uploads/';
foreach ($_FILES["pic"]["error"] as $key => $error)
{
if ($error == UPLOAD_ERR_OK)
{
$tmp_name = $_FILES["pic"]["tmp_name"][$key];
$name = $_FILES["pic"]["name"][$key];
$uploadfile = $uploaddir . basename($name);
if (move_uploaded_file($tmp_name, $uploadfile))
{
echo "Success: File ".$name." uploaded.<br/>";
}
else
{
echo "Error: File ".$name." cannot be uploaded.<br/>";
}
}
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Multiple File Upload with jQuery and PHP</title>
<script src="jquery.js" type="text/javascript" language="javascript"></script>
<script src="jquery.MultiFile.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="pic[]" class="multi" />
<input type="submit" name="upload" value="Upload" />
</form>
</body>
</html>
There is one important thing to be noticed.
<input type="file" name="pic[]" class="multi" />
You have add “[ ]” to name of your element. And you also have to add class=”multi”.
For more examples, see:
http://www.fyneworks.com/jquery/multiple-file-upload/#tab-Examples
Related posts:
- File Upload in PHP :: Simplified
- Magento: How to upload file?
- Magento jQuery: How to use them together?
- File Upload in PEAR and Smarty
- jQuery: Print array and object
- jQuery: Set time interval between events with queue function
- jQuery: A simple Slideshow
- jQuery: How to replace string, div content and image src?
- jQuery: Animate and Transfer effect with Image
- jQuery: Preview Image with Tooltip Effect
View Mukesh Chapagain's profile
