اگر قصد دارید آپلود فایل با drag & drop را در پروژه های php خود پیاده سازی کنید ، پس این مقاله بسیار به شما کمک خواهد کرد . با این آموزش به راحتی می توانید آپلود فایل با drag & drop یا آپلود عکس را در کمتر از ۵ دقیقه پیاده سازی کنید.
با استفاده از DropzoneJS و PHP به راحتی می توانید آپلود فایل با drag & drop را در اپلیکیشن های تحت وب خود قرار بدید . DropzoneJS یک کتابخانه متن باز و رایگان (open source) است که به شما امکان آپلود فایل با drag & drop همراه با پیشنمایش برای عکس ها را فراهم می کند. این کتابخانه بسیار سبک است ، نیازی به هیچ کتابخانه جانبی دیگری (مثل jQuery) ندارد .
DropzoneJS هیچ گونه مدیریتی برای انتقال فایل ها بر روی سرور انجام نمی دهد . پس ، ما از php برای آپلود فایل در سرور و MySQL برای قرار دادن اطلاعات فایل در دیتابیس استفاده می کنیم.
شما نیاز به دو فایل کتابخانه Dropzone دارید . dropzone.js و dropzone.css . این فایل ها را می توانید از سایت DropzoneJS دانلود کنید . همچنین سورس کد این فایل ها را در آخر این مقاله برای دانلود قرار دادیم .
برای نظم بخشیدن به ساختار فایل و فولدرها به صورت زیر عمل می کنیم :
- فولدر js/ را ساخته و فایل dropzone.js را داخل آن قرار بدید
- فولدر css/ را ساخته و فایل dropzone.css را داخل آن قرار بدید
- فولدر uploads/ را برای ذخیره فایل های آپلود شده بسازید
- فایل upload.php را برای مدیریت سرور-ساید آپلود فایل و ذخیره اطلاعات فایل در دیتابیس ایجاد کنید
حالا ساختار فایل و فولدرهای ما به صورت زیر خواهد بود .
- js/
- dropzone.js
- css/
- dropzone.css
- uploads/
- index.html
- upload.php
ساخت جداول دیتابیس
اگر قصد ذخیره اطلاعات فایل را داشتید ، یک جدول در دیتابیس ایجاد کنید . برای تست ما یک جدول files برای ذخیره اسم فایل در دیتابیس ساختیم
|
1 2 3 4 5 6 |
CREATE TABLE `files` ( `id` int(11) NOT NULL AUTO_INCREMENT, `file_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL, `uploaded` datetime NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci; |
فایل index.html
کتابخانه های Dropzone را فراخوانی کنید
|
1 2 3 |
<!-- Add Dropzone --> <link rel="stylesheet" type="text/css" href="css/dropzone.css" /> <script type="text/javascript" src="js/dropzone.js"></script> |
شما فقط به یک تگ form باز و بسته بدون قرار دادن هیچ المنت دیگری داخل آن نیاز دارید . در تگ form باید مشخصه های action و class را تعیین کنید . مشخصه action برای تعریف کردن فایلی که قصد انجام عملیات سمت سرور آپلود فایل را دارد و کلاس dropzone برای تعیین هویت کتابخانه Dropzone استفاده می شود. که ما برای آپلود فایل با drag & drop از این تگ بهره می بریم.
|
1 2 3 4 |
<div class="image_upload_div"> <form action="upload.php" class="dropzone"> </form> </div> |
فایل upload.php
این فایل برای انجام عملیات آپلود فایل و قرار دادن اطلاعات فایل در دیتابیس استفاده می شود
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?php if(!empty($_FILES)){ //database configuration $dbHost = 'localhost'; $dbUsername = 'root'; $dbPassword = ''; $dbName = 'netparadis'; //connect with the database $conn = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName); if($mysqli->connect_errno){ echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error; } $targetDir = "uploads/"; $fileName = $_FILES['file']['name']; $targetFile = $targetDir.$fileName; if(move_uploaded_file($_FILES['file']['tmp_name'],$targetFile)){ //insert file information into db table $conn->query("INSERT INTO files (file_name, uploaded) VALUES('".$fileName."','".date("Y-m-d H:i:s")."')"); } } ?> |
برای کپی صحیح و کامل کدها ، دابل کلیک کرده تا وارد محیط سفید و کپی شوید در غیر اینصورت امکان دارد اجرای کدها با مشکل روبرو شود
برای آشنایی با نحوه آپلود فایل توسط php و اتصال به دیتابیس با mysqli کلیک کنید
خب تمام شد ، همین بود . دید به چه سادگی آپلود فایل با drag & drop در PHP با یک کتابخانه سبک و جالب DropzoneJS را پیاده سازی کردیم . کاری که شاید قبلا در سایت های مختلف دید و احساس می کردید بسیار پیچیده و سخت است .
هر گونه سوالی در مورد پیاده سازی و اجرای این اسکریپت php داشتید . از قسمت نظرات با ما در ارتباط باشید . سریعا پاسخگوی سوالات شما هستیم.
برای دانلود سورس کد آپلود فایل با drag & drop در PHP از باکس دانلود استفاده کنید.
موفق و پیروز باشید..
واقعا ممنون از زحماتتون
سلام وقت بخیر یه سوال داشتم چطوری به مقدار رو به همراه عکس ها بفرستیم ??
سلام. ممنون.
نیاز به تغییرات زیادی در هسته این پلاگین دارد و جز آپشن ها آن نیست که البته باز باید در سایت اصلی توسعه دهنده از بین امکانات این مورد رو بگردید
موفق باشید.
برای فرمت ID=”dropzone” بذار بعد اینو در اخر کدهات اضافه کن تو فایل فایل index.html هر داده ای رو میتونی append کنید
Dropzone.options.dropzone = {
init: function (e) {
var myDropzone = this;
myDropzone.on(‘sending’, function(data, xhr, formData) {
var data2 = $(‘#mode’).val();
formData.append(“other”, JSON.stringify(data2));
});
}
باسلام
تشکر از مطلب کاربردی فوق.
لطفا راهنمایی کنید که برای افزایش حجم فایل آپلود شده کدام خط از dropzone.js را باید تغییر داد و به چه نحوی؟
سلام. خوشحالیم که مفید واقع شده.
نیازی به تغییر داخل کد اصلی کتابخانه نیست. این قابلیت بصورت یک آپشن هنگام فراخوانی تابع اصلی کتابخانه قابل ست کردن است.
به هر حال داخل این فایل js در خط ۱۲۲ و بخش maxFilesize: 256 میتوانید حجم فایل آپلودی را تغییر بدید
موفق باشید.
باتشکر از پاسخگویی بموقع.
حتی با تغییر مقدار maxfilesize در کد اصلی کتابخانه js همچنان فایل بالای ۲ مگ قابلیت آپلود ندارد.مثل قبل فقط progress انجام میشه تیک هم میخوره ولی درون فولدر فایلی ایجاد نمیشه.ممنون میشم راهنمایی بفرمایید.
((ضمنا با همان مقدار ۲۵۶ فایل زیر ۲ مگ آپلود میشود و در فولدر قرار میگیرد.منظور از ۲۵۶ چیست که حتی فایل بالاتر از آن تا حجم ۲ مگ آپلود میشود؟ این رو هم توضیح بفرمایید.))
پیشاپیش از پیگیریتان سپاسگزارم
مقداری که تعیین می کنید مگابایت است پس ۲۵۶ مگابایت مقدار پیش فرض کتابخانه است و فایل شما خیلی کمتر از این مقدار است
پس این مورد میتونه مرتبط با خود وب سرور شما باشه که محدودیت حجم داده post شده داره که باید در کانفیگ آن تغییر لحاظ کنید که در لوکال هاست این مورد هست و باید در httpd.conf تغییر بدید
https://www.cyberciti.biz/faq/apache-limiting-upload-size/
چرا که در صورت قبول نکردن حجم از سمت کتابخانه خطای محدودیت حجم نمایش داده میشود پس مشکل از محیط اجرای شما است.
همچنین برای احتیاط مقدار upload_max_filesize در فایل php.ini رو هم بررسی کنید.
هر گونه تغییر باید با ریستارت کردن وب سرور (apache) و پاک کردن کش مرورگر همراه باشد.
موفق باشید.
ممنون با تغییر در php.ini که شما گفتید و همچنین تغییر max-post data مشکل رفع شد
سلام این اموزش عالی بود من یه سوال داشتم اگر میشه یه اموزش درست کنید که در اون اپلود فایل رو با تمام ارور ها و فرستادن به دیتابیس و اپلود به پوشه دلخواه انجام بده 🙂
فقط لطفا توجه کنید بخش اصلی خواسته من بخش ارور هاست که واقعا اذیت کننده ان 🙁
اگر میشه این آموزش رو در حالت oop یا شی گرایی بدید چون بیشتریا از این حالت استفاده می کنن فک کنم ! من یه سری آموزش دیدم که توی oop کار رو انجام میداد اما بخش ارور هاش خیلی ضعیف بود بازم خیلی ممنون میشم اگر این کار رو انجام بدید ! 🙂
سلام. خوشحالم که مفید واقع شده.
معمولا برا اینکار از پکیج های آماده و معروف استفاده میشه که به رایگان از اینجا قابل دسترس و اضافه کردن به پروژه هست
https://packagist.org/
موفق باشید.
سلام خسته نباشید. بعد از آپلود فایل میخام اسم یا آدرس فایل آپلود شده رو درون یه inputاز نوعtextقرار بدم. چطوری میتونم اینکارو انجام بدم. سوال دومم اینه ک میخام آپلود فایل بدونrefreshشدن صفحه باشه. ممنون میشم راهنمایی کنید.
سلام . ممنون. کافیه که بعد از آپلود, در فایل upload.php این عملیات رو پیاده سازی کنید .
برای آپلود بصورت ajax نیز آموزش https://netparadis.com/php-ajax-image-upload را مطالعه بفرمایید
موفق باشید.
جناب شفیعی عزیز
بنده منظور اینه از این addRemoveLinks: true در dropzone چطور میتونم استفاده کنم .
برای اینکار بهتره تابع مربوطه رو فراخوانی کنید و آپشن مورد نظر رو ست کتید به این صورت
$("div#myID").dropzone({addRemoveLinks: true
});
سلام و وقت بخیر
آموزشتون خوب بود، فقط بازمانی که آپلود شد برای حذف فایل های آپلود شده به چه صورت هست؟
منظورم اینه که ما بعد آپلود کردن یک فایل رو خواستیم حذف کنیم هم از دیتابیس و هم از پوشه ای که فایل آپلود شده.
ممنون
سلام . ممنونم .
برای اینکار بهتره از دستور unlink در php و همچنین کویری delete در sql استفاده کنید که نحوه حذف فایل توسط php را می توانید مطالعه بفرمایید
موفق و پیروز باشید.