Hello ,
I have created a page where user can uplaod a file and the file is upload in a folder.
Also there are two divs. In first div user can see the file he uploaded and also can delete it.
In second div the user can drag file from first div and drop in second div and vice versa.
But i am unable to do it. Please help me as soon as possible. Its urgent
Thanks.
For reference my code is :
1)ajaxfileupload.css:
html, body
{
margin: 0;
padding: 0;
}
body
{
font: 12px/1.3em Arial, Helvetica, sans-serif;
color: #000;
background-color: #fff;
}
h1, h2, h3, h4, h5
{
margin: 0 0 1em;
color: #F2683E;
}
h1
{
font-size: 18px;
font-weight: normal;
}
p{margin: 0 0 1em;}
a,
a:link,
a:visited{color: #F2683E;}
a:hover,
a:active{}
a img{border: none;}
form{margin: 0;}
fieldset{padding: 0;}
hr
{
height: 1px;
border: none;
color: #999;
background-color: #999;
}
/* ~~~ === POSITIONG SELECTORS ======================================= ~~~ */
#wrapper
{
position: relative;
width: 773px;
height: 474px;
border:1px solid;
}
#content
{
float: left;
display: inline;
width: 541px;
height: 341px;
margin: 30px 0 0 8px;
padding: 22px;
border:1px solid;
}
#first
{
float:left;
border:1px solid;
height:250px;
width:240px;
margin-top:40px;
}
#second
{
float:left;
border:1px solid;
height:250px;
width:240px;
margin-top:40px;
margin-left:60px;
}
2)doajaxfileupload:
<?php
$error = "";
$msg = "";
$fileElementName = 'fileToUpload';
$add = array();
if(!empty($_FILES[$fileElementName]['error']))
{
switch($_FILES[$fileElementName]['error'])
{
case '1':
$error = 'The uploaded file exceeds the upload_max_filesize directive in php.ini';
break;
case '2':
$error = 'The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form';
break;
case '3':
$error = 'The uploaded file was only partially uploaded';
break;
case '4':
$error = 'No file was uploaded.';
break;
case '6':
$error = 'Missing a temporary folder';
break;
case '7':
$error = 'Failed to write file to disk';
break;
case '8':
$error = 'File upload stopped by extension';
break;
case '999':
default:
$error = 'No error code avaiable';
}
}elseif(empty($_FILES['fileToUpload']['tmp_name']) || $_FILES['fileToUpload']['tmp_name'] == 'none')
{
$error = 'No file was uploaded..';
}else
{
@move_uploaded_file($_FILES['fileToUpload']['tmp_name'], 'upload/' . $_FILES['fileToUpload']['name']);
$msg = $_FILES['fileToUpload']['name'];
//for security reason, we force to remove all uploaded file
@unlink($_FILES['fileToUpload']);
}
echo "{";
echo "error: '" . $error . "',\n";
echo "msg: '" . $msg . "'\n";
echo "}";
?>
3)ajaxfileupload:
<html>
<head>
<title>File Upload</title>
<link href="ajaxfileupload.css" type="text/css" rel="stylesheet">
<link href="jquery-ui-1.8.14.custom.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript">
i = 0;
$(function() {
$( "#" ).draggable({ disabled: true });
});
function del(sh)
{
con = confirm('Are you sure want to delete.');
if(con){
id = "#"+sh;
$(id).remove();
}
}
function ajaxFileUpload()
{
$("#loading")
.ajaxStart(function(){
$(this).show();
})
.ajaxComplete(function(){
$(this).hide();
});
$.ajaxFileUpload
(
{
url:'doajaxfileupload.php',
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'json',
data:{name:'logan', id:'id'},
success: function (data, status)
{
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
}else
{
$('#first').append("<div id='"+i+"' class='ui-widget-content'>"+data.msg+"<img src='delete.png' height='16' width='16' onclick='del(\""+i+"\");'></div>");
id="#"+i;
$(id).draggable({
revert:true
});
$('#second').droppable({
accept: "#first",
hoverClass: 'ui-widget-content',
drop:function(event,ui){
$('#second').append($('#first'));
}
});
i++;
}
}
},
error: function (data, status, e)
{
alert(e);
}
}
)
return false;
}
</script>
</head>
<body>
<div id="content">
<form name="form" action="" method="POST" enctype="multipart/form-data">
<table cellpadding="0" cellspacing="0" class="tableForm">
<thead>
<tr>
<th>Please select a file and click Upload button</th>
</tr>
</thead>
<tbody>
<tr>
<td><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></td>
</tr>
</tfoot>
</table>
</form>
<div style = "border:0px solid; float:left; height:300px; width:560px;" >
<div id = "first"></div>
<div id = "second"></div>
</div>
</div>
</body>
</html>