Smiley face

عنوان : آپلود تصوير بوسيله Drag & Drop با استفاده از jQuery و Ajax و PHP

1396/11/07 - 16:25:11
Drag And Drop Image Upload Using jQuery Ajax And PHP


آپلود تصوير بوسيله Drag & Drop با استفاده از jQuery و Ajax و PHP

Drag And Drop Image Upload Using jQuery Ajax And PHP

 

کشیدن و رها کردن عکس براي آپلود شدن یک فرایند جدید برای آپلود تصویر یا هر فایل ديگر به فرم آپلود مي باشد. در این آموزش ما به شما نشان می دهيم که چگونه مي توانيد با کشیدن و رها کردن با استفاده از جی کوئری آژاکس و PHP تصاویر را آپلود نماييد.

drag_and_drop

برای کشیدن و رها کردن عکس و آپلون آن فقط چهار مرحله را اجرا می کنيم:

    1.  یک فایل HTML ایجاد کنید و علامت گذاری را تعریف کنید
    2.  یک فایل JS برای ویژگی کشیدن و رها کردن ایجاد کنید
    3.  یک فایل پی اچ پی برای آپلود فایل ایجاد کنید
    4.  یک فایل CSS ایجاد کنید و یک ظاهر را تعریف کنید

مرحله 1. یک فایل HTML ایجاد کنید و علامت گذاری را تعریف کنید.
ما یک فایل 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 ایجاد کردیم. این منطقه است که کاربر تصویر خود را برای آپلود قرار داده و جی کوئری را وارد می کنیم. فایل و فایل upload_script ما و فایل CSS که ما قصد داریم در مراحل بعدی ایجاد کنیم.

 

مرحله 2. یک فایل js برای قابلیت کشیدن و رها کردن
ما یک فایل 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' براي دريافت تصوير و قرار دادن آن در متغير image  با فراخوانی تابع ()createFormData هر زمان که کاربر تصویر را در حوزه drop قرار می دهد، استفاده مي كنيم. درتابع createFormData() ما شي FormData را ایجاد می کنیم و تابع ()uploadFormData را فراخواني مي كنيم. درتابع uploadFormData() ما از آژاكس برای آپلود تصویر استفاده می کنیم.

 

مرحله 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 ایجاد کنید و یک ظاهر را تعیین کنید.
ما یک فایل 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;
}

اين آموزش ، چگونگي آپلود تصویر با کشیدن و رها کردن با استفاده از جی کوئری آژاکس و PHP را نشان داد. می توانید این کد را به دلخواه خود سفارشی كنيد.

1396/11/07 - 16:25:11
برچسب هاي مطلب :



شما اولين نفري باشيد كه نظر ارسال مي كند.

فرم ثبت نظر

نام و نام خانوادگی
ایمیل
وبلاگ
نظر و کامنت
كد امنيتي