CODEWITHSUNDEEP
php
Jake Ball
Jake Ball

Reputation: 808

Multiple File Uploading in PHP

I have been developing an upload site for a couple of months now, and the most requested feature on the site has been for a Multiple File Uploader, personally, I am more than happy to bring this feature in however I am looking for already-available scripts that will allow me to do this, as I have no idea how to code a purely php/html upload tool.

I came across SWFUpload, this seems like a decent script however I wanted to see if it could do the following:

-> Allow me to select what file extensions are allowed to be upload. -> Allow me to set the maximum amount of files being uploaded. -> Allow me to perform MySQL Queries post upload, as we log all uploads and assign them to accounts

I will need a lot of flexibility in such script, and SWFUpload does not seem to offer such flexibility to change the script into something I want, so I am asking if it would simply be easier to convert what currently is a single file uploader to a multi-file uploader.

Thank you for your time, Jake

Upvotes: 2

Views: 440

Answers (4)

aarju mishra
aarju mishra

Reputation: 710

You need to include these 4 files along with a folder named as "uploads" in which the images uploaded will be stored.

multiupload.php

<html>
<head>
<title>Upload Multiple Images Using jquery and PHP</title>
<!-------Including jQuery from Google ------>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
<!------- Including CSS File ------>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div id="maindiv">
<div id="formdiv">
<h2>Multiple Image Upload Form</h2>
<form enctype="multipart/form-data" action="upload.php" method="post">
First Field is Compulsory. Only JPEG,PNG,JPG Type Image Uploaded. Image Size Should Be Less Than 100KB.
<div id="filediv"><input name="file[]" type="file" id="file"/></div>
<input type="button" id="add_more" class="upload" value="Add More Files"/>
<input type="submit" value="Upload File" name="submit" id="upload" class="upload"/>
</form>
<!------- Including PHP Script here ------>
<?php include "connect.php"; ?>
<?php include "upload.php"; ?>

</div>
</div>
</body>
</html>

upload.php

<?php include "connect.php"; ?>


<?php
if (isset($_POST['submit'])) {
$j = 0;     // Variable for indexing uploaded image.
$target_path = "uploads/";     // Declaring Path for uploaded images.
for ($i = 0; $i < count($_FILES['file']['name']); $i++) {
// Loop to get individual element from the array
$validextensions = array("jpeg", "jpg", "png","pdf","gif","doc","docx","txt","bmp");      // Extensions which are allowed.
$ext = explode('.', basename($_FILES['file']['name'][$i]));   // Explode file name from dot(.)
$file_extension = end($ext); // Store extensions in the variable.
//$target_path = $target_path . md5(md5(uniqid())) . "." . $ext[count($ext) - 1];     // Set the target path with a new name of image.
$j = $j + 1;      // Increment the number of uploaded images according to the files in array.
if (($_FILES["file"]["size"][$i] < 20000000)     // Approx. 100kb files can be uploaded.
&& in_array($file_extension, $validextensions)) {
if (move_uploaded_file($_FILES['file']['tmp_name'][$i], "uploads/".$_FILES['file']['name'][$i])) {

    //if (move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) { <!----For file uploading with actual name->

// If file moved to uploads folder.
echo $imagename=basename($_FILES['file']['name'][$i]);
echo $imagetmp="uploads/" . $imagename;

//Insert the image name and image content in image_table
$insert_image="INSERT INTO `image_table`(`image_name`, `image_content`) VALUES('$imagetmp','$imagename')";

mysql_query($insert_image);


echo $j. ').<span id="noerror">Image uploaded successfully!.</span><br/><br/>';
} else {     //  If File Was Not Moved.
echo "not inserted in db";
echo $j. ').<span id="error">please try again!.</span><br/><br/>';
}
} else {     //   If File Size And File Type Was Incorrect.
echo $j. ').<span id="error">***Invalid file Size or Type***</span><br/><br/>';
}


}

}
?>

script.js

var abc = 0;      // Declaring and defining global increment variable.
$(document).ready(function() {
//  To add new input file field dynamically, on click of "Add More Files" button below function will be executed.
$('#add_more').click(function() {
$(this).before($("<div/>", {
id: 'filediv'
}).fadeIn('slow').append($("<input/>", {
name: 'file[]',
type: 'file',
id: 'file'
}), $("<br/><br/>")));
});
// Following function will executes on change event of file input to select different file.
$('body').on('change', '#file', function() {
if (this.files && this.files[0]) {
abc += 1; // Incrementing global variable by 1.
var z = abc - 1;
var x = $(this).parent().find('#previewimg' + z).remove();
$(this).before("<div id='abcd" + abc + "' class='abcd'><img id='previewimg" + abc + "' src=''/></div>");
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
$(this).hide();
$("#abcd" + abc).append($("<img/>", {
id: 'img',
src: 'x.jpg',
alt: 'delete'
}).click(function() {
$(this).parent().parent().remove();
}));
}
});
// To Preview Image
function imageIsLoaded(e) {
$('#previewimg' + abc).attr('src', e.target.result);
};
$('#upload').click(function(e) {
var name = $(":file").val();
if (!name) {
alert("First Image Must Be Selected");
e.preventDefault();
}
});
});

style.css

@import "http://fonts.googleapis.com/css?family=Droid+Sans";
form{
background-color:#fff
}
#maindiv{
width:960px;
margin:10px auto;
padding:10px;
font-family:'Droid Sans',sans-serif
}
#formdiv{
width:500px;
float:left;
text-align:center
}
form{
padding:40px 20px;
box-shadow:0 0 10px;
border-radius:2px
}
h2{
margin-left:30px
}
.upload{
background-color:red;
border:1px solid red;
color:#fff;
border-radius:5px;
padding:10px;
text-shadow:1px 1px 0 green;
box-shadow:2px 2px 15px rgba(0,0,0,.75)
}
.upload:hover{
cursor:pointer;
background:#c20b0b;
border:1px solid #c20b0b;
box-shadow:0 0 5px rgba(0,0,0,.75)
}
#file{
color:green;
padding:5px;
border:1px dashed #123456;
background-color:#f9ffe5
}
#upload{
margin-left:45px
}
#noerror{
color:green;
text-align:left
}
#error{
color:red;
text-align:left
}
#img{
width:17px;
border:none;
height:17px;
margin-left:-20px;
margin-bottom:91px
}
.abcd{
text-align:center
}
.abcd img{
height:100px;
width:100px;
padding:5px;
border:1px solid #e8debd
}
b{
color:red
}

By using this code, you can upload multiple images and that images will be stored in the database too.For that purpose you need to create one table in database in which there are three fields id,image_name and image_content.

Upvotes: 0

pgratton
pgratton

Reputation: 663

This script offers all what you need !

http://valums.com/ajax-upload/

Upvotes: 1

ItsMIllerTime65
ItsMIllerTime65

Reputation: 95

I've used Maian Uploader before and it is extremely flexible. You can specify which file types to allow people to upload, a file size limit, select multiple files to upload, etc. Here's the link to the page http://www.maianscriptworld.co.uk/free-php-scripts/maian-uploader/free-file-upload-system/index.html.

The design is anything but pretty but you can customize it to your liking. You may want to check out the demo first http://www.maianscriptworld.com/demos/uploader/. You just login and go to the upload section on the left to check it out.

Upvotes: 2

472084
472084

Reputation: 17886

If you are happy to make somethnig for modern browsers only you can simply make your form look like:

<input name="files[]" type="file" multiple="multiple" />

And your browser will automatically do the rest for the front end.

If you already can upload files it wont take many changes to upload multiple files, just do what your doing now but in a loop. print_r($_FILES) will show you the structure.

If you want a fancy front end I recommend Uploadify, it works really well with jQuery.

Upvotes: 5

Related Questions