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

آموزش آپلود فایل با دراگ و دراپ

آپلود کردن عکس با استفاده از Drang & Drop روش جدیدی برای آپلود عکس ها میباشد و از این روش میتوانید برای آپلود کردن هر فایلی استفاده کنید تا برای Upload آن به راحتی آن را از مسیر خود Drag و در فرم Upload وب Drop کنید. در این مقاله ما آپلود فایل با دراگ و دراپ را با استفاده از jquery و Ajax و php برای شما شرح میدهیم. این روش برای جذاب تر شدن طراحی سایت شما مفید میباشد. برای انجام اینکار شما به ۴ مرحله نیاز دارید که برای شما آن ها را نام میبریم :

۱- یک فایل html برای کدهای وب

۲- یک فایل Js برای کد هاغی مربوط به Drag & Drop

۳-یک فایل php برای Upload عکس

۴- یک فایل CSS برای استایل ها

در مرحله اول ما یک فایل HTMl به اسم Upload HTML ایجاد کرده و ذخیره میکنیم :

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

&lt;html&gt;<br />
&lt;head&gt;<br />
&lt;link rel="stylesheet" type="text/css" href="upload_style.css"&gt;<br />
&lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;<br />
&lt;script type="text/javascript" src="upload_script.js"&gt;&lt;/script&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;div id="wrapper"&gt;<br />
&lt;input type="file"&gt;<br />
&lt;div id="drop-area"&gt;<br />
&lt;h3 class="drop-text"&gt;Drag and Drop Images Here&lt;/h3&gt;<br />
&lt;/div&gt;<br />
&lt;/div&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;
آپلود فایل با دراگ و دراپ

در مرحله دوم ما بک المان فایل برای 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 عکس ها ایجاد کنید :

&lt;?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 />
?&gt;<br />
&lt;img src="&lt;?php echo $targetPath; ?&gt;"&gt;<br />
&lt;?php<br />
exit();<br />
}<br />
}<br />
}<br />
?&gt;
آپلود فایل با دراگ و دراپ

در این مرحله عکس را گرفته و آن را به راحتی در یک پوشه 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 />
}

ویرایش بوسیله کاربر 1396/03/13 01:28:12 ب.ظ  | دلیل ویرایش: مشخص نشده است