Uploading Multiple Files - jQuery, PHP
This multiple File upload technique uses the AjaxForm plugin. Its performance beats that of many other multiple file upload plugins out there. I developed this style after surfing the web endlessly in search for a working jquery multiple file upload plugin.
This multiple file upload tutorial is cool, and easy to learn, I do hope you will enjoy it. please don't forget to leave a comment, request for tutorials or work on (that is, improve) a tutorial on this site and upload back for the benefit of the entire communtiy.
VIEW SCREENSHOT:
For this multiple file upload tutorial We Require two plugins.
- JQuery-1.5.1.min.js Plugin
- JQuery.form.js Plugin
- Index.php - PHP file upload
- Q_upload.js
- Upload.php
Index.php
<html><head>
<style type="text/css">
.roundcorner{
-moz-border-radius: 12px; -webkit-border-radius: 12px;
border-radius: 12px; text-align:justify; font-size:14px;
}
.container{
width:40%; border:1px #cccccc solid; height:auto;
margin-left:10em; float:left;background-color:#ffffff;
margin-bottom:8px; margin-top:8px;
}
#form{
margin:1em; margin-top:0em; padding:1em; height:auto;
background-color:efefef;
}
form input{ margin-left:2em }
.msg{font-size:11px; color:red; margin-left:2px}
</style>
<!--Include Javascript Files-->
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript" src="q_upload.js"></script>
<!--Javascript Ends here-->
</head>
<body>
<div class="roundcorner container">
<br>
<div style="clear:both" id="form">
<form method="post" class="upload" onSubmit="return false" name="upload" enctype="multipart/form-data" action="upload.php">
<label>Upload Photo:<span id="putmore" style="margin-left:0.5em; text-decoration:underline; cursor:pointer; font-weight:100">[+Add more]</span></label>
<p/>
<input type="file" id="file0" class="file" name="file0"/>
<span id="morespan"></span>
<input type="hidden" id="size" name="size"/>
<p/><input type="submit" value="Upload Files" class="uploads"/>
</form>
</div>
</div>
</body>
</html>
Upload.php
<?php$str=array();
$size = $_POST['size'];
for($i=0; $i<=$size; $i++){
$file_name = $_FILES['file'. $i]['name'];
$file_name = stripslashes($file_name);
$file_name = str_replace("'","",$file_name);
$copy = copy($_FILES['file'.$i]['tmp_name'], "uploads/".$file_name);
if($copy){
$str[]= $file_name.' uploaded sucessfully!';
}else{
$str[]='Error uploading '.$file_name;
}
}
//mysql_query("insert into links($link) values()");
echo implode(",",$str);
exit;
?>
Q_upload.js - Ajax file upload
var tt=0;$(document).ready(function(){
$("#putmore").click(function(){
tt = tt+1;
$("#morespan").append('<br/><input type="file" class="file" id="file'+tt+'" name="file'+tt+'"/>');
});
$(".uploads").click(function(){
$("#size").val(tt);
$("form.upload").ajaxForm({
beforeSubmit: validate,
success: function(data){
fixalert(data);
},
}).submit();
return false;
});
});
var aug; var args; var elem; var fmt;
function validate(formData, jqForm, options) {
aug='true'; var arc=[];
for (var i=0; i<(formData.length-1); i++) {
$("#msg"+i).html("");
if (!formData[i].value) {
$("#file"+i).after('<span id="msg'+i+'" class="msg"> Field is empty! </span>');
aug='false';
}
args=$("#file"+i).val();
elem = args.split(".");
fmt = elem.pop();
if ((fmt!='jpg')&&(fmt!='png')&&(fmt!='tif')){
arc.push(fmt);
if (aug!='false'){
$("#file"+i).after('<span id="msg'+i+'" class="msg"> Invalid file format! </span>');
}
}
}
if ((aug=='false')||(arc.length>0)) return false;
}
function fixalert(data){
var part=data.split(",");
for(var r=0;r<part.length;r++){
$("#msg"+r).html("");
$("#file"+r).after("<span id='msg"+r+"' class='msg'> "+part[r]+"</span>");
}
}
KEYWORD:ajax file upload, upload file php, multiple file upload
