PHP, JQuery ve Dropzone kütüphanesini kullanarak nasıl sürükle bırak yöntemi ile dosya yükleriz bununla ilgili kütüphaneyi ve kodları adım adım paylaşacağım.
1. Adım : Kütüphanemizi İndiriyoruz ve çalışma dosyamızın içerisine kopyalıyoruz : İNDİR
2. Adım : index.html dosyamızı oluşturuyoruz :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!doctype html> <html> <head> <link href="style.css" rel="stylesheet" type="text/css"> <link href="dropzone.min.css" rel="stylesheet" type="text/css"> <script src="dropzone.min.js" type="text/javascript"></script> </head> <body > <div class="container" > <div class='content'> <form action="upload.php" class="dropzone" id="dropzonewidget"> </form> </div> </div> </body> </html> |
3. Adım : style.css dosyamızı oluşturuyoruz :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.container{ margin: 0 auto; width: 50%; } .content{ padding: 5px; margin: 0 auto; } .content span{ width: 250px; } .dz-message{ text-align: center; font-size: 28px; } |
4. Adım : upload.php dosyamızı oluşturuyoruz :
|
1 2 3 4 5 6 7 8 |
<?php $target_dir = "upload/"; $target_file = $target_dir . basename($_FILES["file"]["name"]); if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_dir.$_FILES['file']['name'])) { $status = 1; } ?> |
5. Adım : Son olarak çalışma klasörümüz içerisine “upload” isminde bir klasör oluşturuyoruz.
