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
Leave your response!