This is one of the method to upload the file in directory using php and javascript. This method is used to drag the files in a specified place to upload the files using php and javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Drag and drop for upload</title>
<script type="text/javascript" src="js/tuDDUpload.js"></script>
<script type="text/javascript">
window.onload = function() {
options={
dragZone:"dragZone",
uploadUrl:"upload.php",
resultArea:"result"
};
initDDUpload(options);
};
</script>
<style type="text/css">
#dragZone{
border: 2px dashed #F60;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color:#F8DDA5;
padding: 50px;
text-align: center;
font: 20pt bold,"Vollkorn";
color: #F60;
}
</style>
</head>
<div class="container">
<div class="row">
<div class="span7 offset2">
<div id="dragZone">Drop files here to upload</div>
<div id="result" class="mini-layout"></div>
</div>
</div>
</div>
</body>
</html>
var DDUpload=function(options){
this.o=options;
var list=[];
var cur;
var dragZone = document.getElementById(this.o.dragZone);
var result = document.getElementById(this.o.resultArea);
var self=this;
this.init=function(){
if (window.File &&
window.FileReader &&
window.FileList &&
window.Blob)
{
dragZone.addEventListener('dragover', this.drgFile, false);
dragZone.addEventListener('drop', this.drpFile, false);
}
else
{
alert("Your browser doesnot support");
}
};
this.drgFile=function(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
};
this.drpFile=function(e) {
e.stopPropagation();
e.preventDefault();
self.preview(e);
};
this.preview=function(e){
var files = e.dataTransfer.files;
var output = [];
for (var i = 0, f; f = files[i]; i++) {
list.push(files[i]);
output.push('<div class="mini-layout"><p><b>Filename:</b>', escape(f.name), '</p>',
'<p><b>Filetype:</b>',f.type,'</P>',
'<p><b>Size:</b>',(Math.round(f.size * 100 / 1024) / 100).toString(),'KB</P>',
'<p><div class="progress progress-striped active"><div class="bar" id="pb',i,'" ></div></div></p>',
'</div>');
}
document.getElementById('result').innerHTML = output.join('');
self.uploadinit();
};
this.uploadinit=function(){
for (var i=0;i<list.length;i++) {
self.upload(list[i],i);
}
};
this.upload=function(ufile,i){
var xhr = new XMLHttpRequest();
var fd=new FormData();
fd.append('file',ufile);
xhr.upload.addEventListener("progress",function(e){self.uploadProgress(e,i)}, false);
xhr.addEventListener("load", function(e){self.uploadFinish(e,i)}, false);
xhr.open("POST", self.o.uploadUrl);
xhr.send(fd);
};
this.uploadProgress=function(e,i){
var percent = Math.round(e.loaded * 100 / e.total);
document.getElementById('pb'+i).style.width=percent.toString()+"%";
};
this.uploadFinish=function(e,i){
document.getElementById('pb'+i).style.width="100%";
};
};
function initDDUpload(options){
var dup=new DDUpload(options);
dup.init();
}
index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Drag and drop for upload</title>
<script type="text/javascript" src="js/tuDDUpload.js"></script>
<script type="text/javascript">
window.onload = function() {
options={
dragZone:"dragZone",
uploadUrl:"upload.php",
resultArea:"result"
};
initDDUpload(options);
};
</script>
<style type="text/css">
#dragZone{
border: 2px dashed #F60;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color:#F8DDA5;
padding: 50px;
text-align: center;
font: 20pt bold,"Vollkorn";
color: #F60;
}
</style>
</head>
<div class="container">
<div class="row">
<div class="span7 offset2">
<div id="dragZone">Drop files here to upload</div>
<div id="result" class="mini-layout"></div>
</div>
</div>
</div>
</body>
</html>
tuDDUpload.js
var DDUpload=function(options){
this.o=options;
var list=[];
var cur;
var dragZone = document.getElementById(this.o.dragZone);
var result = document.getElementById(this.o.resultArea);
var self=this;
this.init=function(){
if (window.File &&
window.FileReader &&
window.FileList &&
window.Blob)
{
dragZone.addEventListener('dragover', this.drgFile, false);
dragZone.addEventListener('drop', this.drpFile, false);
}
else
{
alert("Your browser doesnot support");
}
};
this.drgFile=function(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
};
this.drpFile=function(e) {
e.stopPropagation();
e.preventDefault();
self.preview(e);
};
this.preview=function(e){
var files = e.dataTransfer.files;
var output = [];
for (var i = 0, f; f = files[i]; i++) {
list.push(files[i]);
output.push('<div class="mini-layout"><p><b>Filename:</b>', escape(f.name), '</p>',
'<p><b>Filetype:</b>',f.type,'</P>',
'<p><b>Size:</b>',(Math.round(f.size * 100 / 1024) / 100).toString(),'KB</P>',
'<p><div class="progress progress-striped active"><div class="bar" id="pb',i,'" ></div></div></p>',
'</div>');
}
document.getElementById('result').innerHTML = output.join('');
self.uploadinit();
};
this.uploadinit=function(){
for (var i=0;i<list.length;i++) {
self.upload(list[i],i);
}
};
this.upload=function(ufile,i){
var xhr = new XMLHttpRequest();
var fd=new FormData();
fd.append('file',ufile);
xhr.upload.addEventListener("progress",function(e){self.uploadProgress(e,i)}, false);
xhr.addEventListener("load", function(e){self.uploadFinish(e,i)}, false);
xhr.open("POST", self.o.uploadUrl);
xhr.send(fd);
};
this.uploadProgress=function(e,i){
var percent = Math.round(e.loaded * 100 / e.total);
document.getElementById('pb'+i).style.width=percent.toString()+"%";
};
this.uploadFinish=function(e,i){
document.getElementById('pb'+i).style.width="100%";
};
};
function initDDUpload(options){
var dup=new DDUpload(options);
dup.init();
}
upload.php:
<?php
if (isset($_FILES['file'])) {
if(move_uploaded_file($_FILES['file']['tmp_name'], "uploads/".$_FILES['file']['name'])){
echo "success";
}
else
{
echo "fail";
}
}
exit;
0 Comments