آپلود فایل با دراگ و دراپ

اگر در فضای مجازی به عضویت سایت های اجتماعی در آمده باشید حتما قسمتی را دیده اید که بشما اجازه می دهد عکس خود را به عنوان پروفایل و یا یک عکس زمینه را از روی دسکتاپ خود کشیده و روی صفحه وب قرار دهید. در این جا این کار را آموزش می دهیم.

درج عکس با کمک دراگ و دراپ کردن آن در وب به کمک jQuery Ajax و PHP

آپلود عکس به کمک دراگ و دراپ روند بسیار جدیدی برای آپلود تصویر است واز این شیوه می توان برای آپلود هر فایلی استفاده نمود تا برای آپلود آن بسادگی آن را از مسیر خود دراگ و در فرم آپلود وبگاه دراپ کنید . در این آموزش ما به شما نشان خواهیم داد که که چگونه با کمک jquery و Ajax و php فایل خود را با دراگ و دراپ آپلود کنید.

برای آپلود عکس به کمک دراگ و دراپ تنها چهار گام مرحله زیر لازم است:
1. یک فایل HTml برای کد های وب
2. یک فایل Js برای کد های مربود به دراگ و دراپ
3. یک فایل Php برای آپلود تصویر
4. یک فایل Css برای استایل ها
گام 1. ایجاد یک فایل HTMl
ما این فایل را به نام upload.html ایجاد و ذخیره کرده ایم.

<html>
<head>
<link rel="stylesheet" type="text/css" href="upload_style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="upload_script.js"></script>
</head>
<body>
<div id="wrapper">
<input type="file">
<div id="drop-area">
<h3 class="drop-text">Drag and Drop Images Here</h3>
</div>
</div>
</body>
</html>

در این گام ما یک المان فایل برای دراگ و دراپ عکس ایجاد کرده ایم شما همچنین می توانید بدون استفاده از المان به انجام دراگ و دراپ به پردازید. سپس یک تگ Div به نام drop-area ایجاد کرده ایم این جا همان جایی است که کاربران عکس های خود را برای آپلود شدن باید رها کنند و سپس در گام های بعد ما کد های jquery را به همراه Css ها درج خواهیم کرد.
گام 2 .ایجاد فایل js برای دراگ و دراپ .

ما این فایل را به نام upload_script.js ایجاد و ذخیره کرده ایم

$(document).ready(function()
{
$("#drop-area").on('dragenter', function (e){
e.preventDefault();
$(this).css('background', '#BBD5B8');
});

$("#drop-area").on('dragover', function (e){
e.preventDefault();
});

$("#drop-area").on('drop', function (e){
$(this).css('background', '#D8F9D3');
e.preventDefault();
var image = e.originalEvent.dataTransfer.files;
createFormData(image);
});
});

function createFormData(image)
{
var formImage = new FormData();
formImage.append('userImage', image[0]);
uploadFormData(formImage);
}

function uploadFormData(formData)
{
$.ajax({
url: "upload_image.php",
type: "POST",
data: formData,
contentType:false,
cache: false,
processData: false,
success: function(data){
$('#drop-area').html(data);
}});
}

در این گام از تابع document.ready برای شروع دراگ استفاده کرده ایم و کد دراپ را در جایی که صفحه لود می شود قرار داده ایم کد dragenter برای تغییر رنگ در هر زمانی که کاربر هر عکسی را به ناحیه دراگ کشید و ما از 'drop' برای دریافت متغییر ها عکس و فراخوانی تابع createFormData() استفاده می کنیم . ما یک شیئ FormData ایجاد و تابع uploadFormData() را فرا می خوانیم در تابع uploadFormData() ما از ajax برای آپلود کردن تصویر بهره خواهیم گرفت.
گام 3. یک فایل Php برای آپلود تصاویر ایجاد کنید.
ما این فایل را به نام upload_image.php ایجاد و ذخیره کرده ایم.

<?php
if(is_array($_FILES))
{
if(is_uploaded_file($_FILES['userImage']['tmp_name'])) {
$sourcePath = $_FILES['userImage']['tmp_name'];
$targetPath = "images/".$_FILES['userImage']['name'];
if(move_uploaded_file($sourcePath,$targetPath)) {
?>
<img src="<?php echo $targetPath; ?>">
<?php
exit();
}
}
}
?>

در این گام عکس را دریافت و به سادگی آن را در پوشه ای آپلود می کنیم.
گام 4.ایجاد یک Css
ما این فایل را ایجاد و نام آن را upload_style.css گذاشته ایم.

body
{
width:100%;
margin:0 auto;
padding:0px;
font-family:helvetica;
background-color:#084B8A;
}
#wrapper
{
text-align:center;
margin:0 auto;
padding:0px;
width:995px;
}
#drop-area
{
margin-top:20px;
margin-left:220px;
width:550px;
height:200px;
background-color:white;
border:3px dashed grey;
}
.drop-text
{
margin-top:70px;
color:grey;
font-size:25px;
font-weight:bold;
}
#drop-area img
{
max-width:200px;
}

بله و این هم پایان کار ماست حالا شما می توانید با کمک این کد ها یک وبگاه با قابلیت آپلود تصاویر به کمک دراگ و دراپ داشته باشید اگر خواستید می توانید بسته به نیاز وبگاه خود کمی کد ها را تغییر دهید.