Step 1:- Create a php project.
Step 2:- Put this code in to your index file or any other file.
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/plupload/plupload.full.min.js"></script>
<style type="text/css">
.uploadVedioDiv {
border: 1px dashed rgba(0, 0, 0, 0.3);
background: #f5f5f5;
width: 16%;
text-align: center;
margin: auto;
height: 110px;
cursor: pointer;
padding: 46px;
margin-top: 20px;
}
.title{
font-size: 25px;
font-weight: bold;
margin-top: 50px;
text-align: center;
position: relative;
}
</style>
</head>
<body>
<div class="title">Please select or drop a file for start uploading</div>
<div class="uploadVedioDiv" id="uploadVedioDiv">
<h5>Drop file or click here to upload file</h5>
</div>
<div id="upload_container">
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
uploading("upload.php","uploadVedioDiv","uploadVedioDiv");
});
var uploader;
function uploading(url,btnid,dropableid){
uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : btnid, // you can pass an id...
drop_element : dropableid,
container: document.getElementById('upload_container'), // ... or DOM Element itself
url : url,
flash_swf_url : '../js/Moxie.swf',
silverlight_xap_url : '../js/Moxie.xap',
filters : {
max_file_size : '10mb',
mime_types: [
{title : "Image files", extensions : "pdf,jpg,png"}
]
},
init: {
PostInit: function() {
//document.getElementById('filelist').innerHTML = '';
// document.getElementById('startupload').onclick = function() {
// alert(1)
// uploader.start();
// return false;
// };
},
BeforeUpload: function(up, file) {
},
FilesAdded: function(up, files) {
uploader.start();
},
FileUploaded: function(up, file,object) {
},
UploadProgress: function(up, file) {
//document.getElementById(file.id).getElementsByClassName('progressbar')[0].innerHTML = '<span style="font-weight: bold; color: green; font-size: 20px;">' + file.percent + "%</span>";
},
Error: function(up, err) {
document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message));
}
}
});
uploader.init();
}
</script>
</html>
Step 3:- Create another php file and name it to upload.php
Here is your php code which will move your selected files to server
<?php
/*From this code your your file will be move to your specifed folder*/
$targetfolder = "uploads/";
$file_name = $_FILES['file']['name'];
$fullpath = $targetfolder . $file_name;
if(move_uploaded_file($_FILES['file']['tmp_name'], $fullpath)){
echo 'Files Uploaded Successfully';
}else{
'Some thing went wrong';
}
Your code is ready for uplaod multiples on server with drag and drop functionality.
Plupload is great plugin for multiple file uploading using drag and drop.
Happy coding!!
asdsadsadasdasdas
ReplyDeletedfdsf
ReplyDelete