بنر

آموزش های دیگر:

  1. بهترین سیستم های فروشگاه ساز
  2. آموزش نصب و پیکربندی و استفاده از Git در لینوکس
  3. معرفی افزونه های برتر VS Code برای توسعه دهندگان
  4. Rust vs Python کدام یک برای شما بهتر است

جدول محتوایی

آپلود چند فایل با استفاده از Dropzone JS در PHP

در این قسمت قصد داریم از Dropzone JS برای آپلود چند فایل در PHP استفاده کنیم. وقتی از پروژه یا وب سایت خود استفاده می کنیم، همیشه به عملکردی نیاز دارد که بتواند چندین تصویر را آپلود کند یا بیش از یک فایل بسازد.

اگر از ورودی های متعددی استفاده کنیم که تصاویر را آپلود می کند خوب به نظر نمی رسد. در واقع، تاثیر مثبتی روی تجربه کاربری ما نخواهد داشت. پس باید تلاش کنیم تا آن را بهتر کنیم. اکنون هر وب سایتی از ویژگی آپلود تصویر برخوردار است. اما اگر از فریمورک های PHP مانند Yii، Codeigniter  یا لاراول استفاده میکنید، استفاده از کتابخانه ی Dropzone JS ایده ی فوق العاده ای است.  Dropzone JS یک کتابخانه ی منبع باز جاوا اسکریپت است.

پیش از ادامه ی مقاله ، در صورت نیاز به هاست وردپرس به سایت ایرانیکاسرور مراجعه کرده و از پلن های فوق العاده با قیمت های عالی دیدن کنید.

 

 

 

با استفاده از این کتابخانه، می توانیم به راحتی بیش از یک فایل آپلود شده را بکشیم و رها کنیم. استفاده از کتابخانه Dropzone JS بسیار آسان است. این کتابخانه تسهیلات اعتبار سنجی مانند پسوندهای خاص، حداکثر آپلود فایل و غیره را در اختیار ما قرار می دهد. در مثال داده شده، استفاده از dropzone.js برای آپلود بیش از یک تصویر و ساخت بیش از یک فایل را توضیح خواهیم داد. در مثال ما همچنین با استفاده از بوت استرپ یک طرح بندی بهتر می سازیم.

مراحل آپلود تصاویر و ساخت فایل به شرح زیر است:

  • یک فایل با نام index.php ایجاد کنید
  • یک فایل با نام upload.php ایجاد کنید
  • پوشه ای به نام upload ایجاد کنید

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

در مثال زیر، ما با استفاده از cdn  برای dropzone.js  وارد می کنیم. اگر بخواهیم آن را دانلود کنیم، می توانیم آن را در بخش محلی خود انجام دهیم. مراحل آپلود تصاویر به شرح زیر است:

مرحله 1:

در این مرحله قصد ایجاد فایل index.php را داریم. برای ایجاد این فایل از پوشه root استفاده می کنیم.

ابتدا برای این کار از کد زیر استفاده کرده و آن را در فایل index.php قرار می دهیم. CDN در این فایل برای JS، JQuery، Bootstrap و Dropzone CSS استفاده می شود که به شرح زیر است:

 

index.php

<!DOCTYPE html> 
<html> 
<head> 
<title> Multiple Image upload using dropzone.js in PHP </title> 
<script src="http://demo.javatpoint.com/plugin/jquery.js"></script> 
<link rel="stylesheet" href="http://demo.javatpoint.com/plugin/bootstrap-3.min.css"> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script> 
</head> 
<body> 

<div class="container"> 
<div class="row"> 
<div class="col-md-12"> 
<h2> Multiple Image Upload using dropzone.js in PHP </h2> 
<form action="upload.php" enctype="multipart/form-data" class="dropzone" id="image-upload"> 
<div> 
<h3>Upload Multiple Image By Click On Box</h3> 
</div> 
</form> 
</div> 
</div> 
</div> 

<script type="text/javascript"> 
Dropzone.options.imageUpload = { 
maxFilesize:1, 
acceptedFiles: ".jpeg,.jpg,.png,.gif" 
}; 
</script> 

</body> 
</html>

 

مرحله 2:

در این مرحله قصد داریم فایل upload.php را ایجاد کنیم.

برای ایجاد این فایل از پوشه root استفاده می کنیم. این فایل کد آپلود تصویر را می نویسد که به شرح زیر است:

 

upload.php

<?php 

$uploadDir = 'uploads'; 

if (!empty($_FILES)) { 
$tmpFile = $_FILES['file']['tmp_name']; 
$filename = $uploadDir.'/'.time().'-'. $_FILES['file']['name']; 
move_uploaded_file($tmpFile,$filename); 
} 

?>

مرحله 3:

این آخرین مرحله است و در این مرحله قصد داریم پوشه  upload را ایجاد کنیم. در این مثال ما باید تصاویر را ذخیره کنیم.

به همین دلیل ما یک پوشه آپلود ایجاد خواهیم کرد. آپلودها همچنین می توانند نام های مختلفی داشته باشند. همچنین باید مراقب تغییر در فایل upload.php باشیم.

اکنون مثال بالا ما آماده اجرا است. بنابراین ما از پوشه root خود برای اجرای دستور زیر استفاده می کنیم:

php -S localhost:8000

 

اکنون از مرورگر خود استفاده می کنیم و URL را باز می کنیم که به شرح زیر است:

http://localhost:8000

 

 

وقتی این URL را در مرورگر خود باز می کنیم، مقداری خروجی دریافت می کنیم که به شرح زیر است:

آپلود چند فایل در PHP

 

و کارمون تمومه!

در این مقاله به نحوه ی آپلود چند فایل در PHP با استفاده از Dropzone JS در سه مرحله پرداختیم. امیدواریم از این مقاله نهایت استفاده را ببرید.

شما میتوانید نظرات و مشکلات خود را در بخش کامنت ها با ما به اشتراک بگذارید. موفق باشید!

 

 

27رای - امتیاز 5 ممنون از امتیازی که دادید..!

دسته بندی شده در:

آموزشیبرنامه نویسیجاوا اسکریپت

برچسب شده در:

, , , , , , , , ,