+- انجمن تخصصی ایران سرور (https://forums.irserv.ir)
+-- انجمن: بخش طراحی سایت (https://forums.irserv.ir/Forum-%D8%A8%D8%AE%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA--8)
+--- انجمن: بخش طراحی و راه اندازی سایت (https://forums.irserv.ir/Forum-%D8%A8%D8%AE%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88-%D8%B1%D8%A7%D9%87-%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA--28)
+---- انجمن: مباحث و منابع آموزشی ( طراحی سایت ها ) (https://forums.irserv.ir/Forum-%D9%85%D8%A8%D8%A7%D8%AD%D8%AB-%D9%88-%D9%85%D9%86%D8%A7%D8%A8%D8%B9-%D8%A2%D9%85%D9%88%D8%B2%D8%B4%DB%8C-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-%D9%87%D8%A7--29)
+---- موضوع: آپلود فایل با دراگ و دراپ (/Thread-%D8%A2%D9%BE%D9%84%D9%88%D8%AF-%D9%81%D8%A7%DB%8C%D9%84-%D8%A8%D8%A7-%D8%AF%D8%B1%D8%A7%DA%AF-%D9%88-%D8%AF%D8%B1%D8%A7%D9%BE--2872)
آپلود فایل با دراگ و دراپ - sahar_tym - شنبه ۱۳ خرداد ۱۳۹۶
آپلود فایل با دراگ و دراپ
آموزش آپلود فایل با دراگ و دراپ
آپلود کردن عکس با استفاده از Drang & Drop روش جدیدی برای آپلود عکس ها میباشد و از این روش میتوانید برای آپلود کردن هر فایلی استفاده کنید تا برای Upload آن به راحتی آن را از مسیر خود Drag و در فرم Upload وب Drop کنید. در این مقاله ما آپلود فایل با دراگ و دراپ را با استفاده از jquery و Ajax و php برای شما شرح میدهیم. این روش برای جذاب تر شدن طراحی سایت شما مفید میباشد. برای انجام اینکار شما به
۴ مرحله نیاز دارید که برای شما آن ها را نام میبریم :
۱- یک فایل html برای کدهای وب
۲- یک فایل Js برای کد هاغی مربوط به Drag & Drop
۳-یک فایل php برای Upload عکس
۴- یک فایل CSS برای استایل ها
در مرحله اول ما یک فایل HTMl به اسم Upload HTML ایجاد کرده و ذخیره میکنیم :
<html><br />
<head><br />
<link rel="stylesheet" type="text/css" href="upload_style.css"><br />
<script type="text/javascript" src="jquery.js"></script><br />
<script type="text/javascript" src="upload_script.js"></script><br />
</head><br />
<body><br />
<div id="wrapper"><br />
<input type="file"><br />
<div id="drop-area"><br />
<h3 class="drop-text">Drag and Drop Images Here</h3><br />
</div><br />
</div><br />
</body><br />
</html>
در مرحله دوم ما بک المان فایل برای Drag & Drop ایجاد شده و شما همینطور قادر هستید بدون استفاده کردن از المان Drag & Drop را انجام دهید. بعد از آن تگ Div به اسم drop-area ساخته شده این حا همان محلی میباشد که کاربران عکس های خود را برای Upload شدن Drag and Drop میکنند.
$(document).ready(function()<br />
{<br />
$("#drop-area").on('dragenter', function (e){<br />
e.preventDefault();<br />
$(this).css('background', '#BBD5B8');<br />
});</p>
<p dir="ltr">$("#drop-area").on('dragover', function (e){<br />
e.preventDefault();<br />
});</p>
<p dir="ltr">$("#drop-area").on('drop', function (e){<br />
$(this).css('background', '#D8F9D3');<br />
e.preventDefault();<br />
var image = e.originalEvent.dataTransfer.files;<br />
createFormData(image);<br />
});<br />
});</p>
<p dir="ltr">function createFormData(image)<br />
{<br />
var formImage = new FormData();<br />
formImage.append('userImage', image[0]);<br />
uploadFormData(formImage);<br />
}</p>
<p dir="ltr">function uploadFormData(formData)<br />
{<br />
$.ajax({<br />
url: "upload_image.php",<br />
type: "POST",<br />
data: formData,<br />
contentType:false,<br />
cache: false,<br />
processData: false,<br />
success: function(data){<br />
$('#drop-area').html(data);<br />
}});<br />
}
در این مرحله از تابع document.ready برای شروع Drag استفاده کردیم و کد Drop ار در قسمتی که صفحه بارگذاری میشود قرار داده شده کد dragenter برای تغییر رنگ دادن در هر وقتی که کاربر عکس را در محل مورد نظر Drag مرده و ما از Drop آن را دریافت میکنیم و متغیرهای عکس و فراخوانی تابع createFormData() استفاده می کنیم. یک شی FormData ایجاد کرده و تابع uploadFormData() را فراخوانی میکنیم در تابع uploadFormData() از ajax برای Upload کردن عکس استفاده کنید.
در مرحلخ سوم باید یک فایل php برای Upload عکس ها ایجاد کنید :
<?php<br />
if(is_array($_FILES))<br />
{<br />
if(is_uploaded_file($_FILES['userImage']['tmp_name'])) {<br />
$sourcePath = $_FILES['userImage']['tmp_name'];<br />
$targetPath = "images/".$_FILES['userImage']['name'];<br />
if(move_uploaded_file($sourcePath,$targetPath)) {<br />
?><br />
<img src="<?php echo $targetPath; ?>"><br />
<?php<br />
exit();<br />
}<br />
}<br />
}<br />
?>
در این مرحله عکس را گرفته و آن را به راحتی در یک پوشه Upload میکنیم. و یک CSS ایجاد میکنیم :
body<br />
{<br />
width:100%;<br />
margin:0 auto;<br />
padding:0px;<br />
font-family:helvetica;<br />
background-color:#084B8A;<br />
}<br />
#wrapper<br />
{<br />
text-align:center;<br />
margin:0 auto;<br />
padding:0px;<br />
width:995px;<br />
}<br />
#drop-area<br />
{<br />
margin-top:20px;<br />
margin-left:220px;<br />
width:550px;<br />
height:200px;<br />
background-color:white;<br />
border:3px dashed grey;<br />
}<br />
.drop-text<br />
{<br />
margin-top:70px;<br />
color:grey;<br />
font-size:25px;<br />
font-weight:bold;<br />
}<br />
#drop-area img<br />
{<br />
max-width:200px;<br />
}