<script>
$(document).ready(function()
{
var settings = {
url: "upload-file-josn.php?op=writeup-docs",
dragDrop:true,
fileName: "myfile", //set filename here
multiple: true,
showDone: false,
maxFileSize: -1,
allowedTypes:"doc,docx,xls,xlsx,txt,jpg,png,gif,doc,pdf,zip,mp4,flv,wmv,avi,mkv,3gp,dat,mp3,wav,rar,mpg",
returnType:"json",
onSuccess:function(files,data,xhr){
if($("#doc_file").val()!=""){$("#doc_file").val($("#doc_file").val()+','+data);}else{$("#doc_file").val(data);}
$.colorbox.resize();
//alert($("#doc_file").val());

},
onError: function (files, status, message) {alert(status);},
showDelete:true,
deleteCallback: function(data,pd)
{
for(var i=0;i<data.length;i++)
{
$.post("delete-upload-file-json.php",{op:"delete",name:data[i]},
function(resp, textStatus, jqXHR)
{
//Show Message
//$("#status").append("<div>File Deleted</div>");
$.colorbox.resize();
});
}
pd.statusbar.hide(); //You choice to hide/not.

}
}
var uploadObj = $("#mulitplefileuploader").uploadFile(settings);
});
</script>

<div id="mulitplefileuploader">Upload a file</div>
<input type="hidden" id="doc_file" name="doc_file" value="<?php echo $doc_file; ?>"/>

upload-file-json.php

<?php
if($_REQUEST['op']=='writeup-docs'){
$output_dir = "path1";
}
else{
$output_dir = "path2";
}
if(isset($_FILES["myfile"]))
{
$ret = array();
$error =$_FILES["myfile"]["error"];

if(!is_array($_FILES["myfile"]["name"])) //single file
{
$fileName = time().'_'.$_FILES["myfile"]["name"];
move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir.$fileName);
$ret[]= $fileName;
}
else //Multiple files, file[]
{
$fileCount = count($_FILES["myfile"]["name"]);
for($i=0; $i < $fileCount; $i++)
{
$fileName = time().'_'.$_FILES["myfile"]["name"][$i];
move_uploaded_file($_FILES["myfile"]["tmp_name"][$i],$output_dir.$fileName);
$ret[]=$fileName;
}

}
echo json_encode($ret);
}
?>

1). Add the CSS and JS files in the head sections

<link href="http://hayageek.github.io/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://hayageek.github.io/jQuery-Upload-File/jquery.uploadfile.min.js"></script>

http://hayageek.com/docs/jquery-upload-file.php

Advertisements