Apakah Anda mencari unggahan file seret dan lepas yang kreatif atau unggahan gambar. Dalam posting tutorial ini, saya ingin menunjukkan kepada Anda bagaimana membuat upload file drag and drop menggunakan php dan dropzonejs. Saya harap ini berguna untuk proyek dan aplikasi web media sosial Anda, cukup periksa tautan demo di bawah ini

DropzoneJS adalah pustaka sumber terbuka yang menyediakan unggahan file drag'n'drop dengan pratinjau gambar. Ringan, tidak bergantung pada pustaka lain (seperti jQuery). Dropzone JS tidak menangani pengunggahan file ke server. Jadi, kita akan menggunakan PHP untuk mengunggah file di server dan MySQL untuk memasukkan informasi file di database

LANGKAH 1. Buat Database “ Proyek “.

Untuk menyimpan informasi file, buat tabel “ drag_drop_files ” ke dalam database untuk menyimpan nama file yang diunggah.

[kode]BUAT TABEL `drag_drop_files` (
`id` int(11) BUKAN NULL AUTO_INCREMENT,
`file_name` varchar(255) KUMPULKAN utf8_unicode_ci BUKAN NULL,
tanggal waktu `diunggah` BUKAN NULL,
KUNCI UTAMA (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;[/code]

LANGKAH 2

Unduh file perpustakaan Dropzone dropzone. js dan dropzone.js. css. Anda memerlukan dua file perpustakaan Dropzone dropzone. js dan dropzone.js. css. Anda dapat mengunduh kedua file ini dari situs DropzoneJS

Langkah 3

Buat folder js/ dan masukkan file dropzone.js ke dalamnya
Buat folder css/ dan masukkan file dropzone.css ke dalamnya
Buat folder uploads/ untuk menyimpan file yang diunggah
Buat file index.html untuk halaman formulir depan
Buat file upload.php_ untuk menangani upload file sisi server dan menyimpan informasi file ke dalam database

Langkah 4

Salin di bawah Indeks kode HTML. html

[code]


<. – Tambahkan Dropzone –>

Seret dan Lepas. Unggah Banyak File menggunakan DropzoneJS dan PHP. Dengan Kelas TryCatch

Langkah 5. Untuk mengupload file ke folder (uploads/) dan memasukkan informasi file ke database, salin kode PHP di bawah ini untuk mengupload. file php

[kode]echo "Gagal terhubung ke MySQL. (". $mysqli->connect_errno. ")". $mysqli->connect_error;
}

$targetDir = "upload/";
$namafile = $_FILES['file']['nama'];
$targetFile = $targetDir. $namaberkas;
if(move_uploaded_file($_FILES['file']['tmp_name'],$targetFile)){
// masukkan informasi file ke dalam tabel db
$conn->query("INSERT INTO drag_drop_files (file_name, upload) VALUES(‘". $namafile. "’,’". tanggal("Y-m-d H. i. s"). "’)");
}

}
?>[/kode]

Jangan lupa untuk membagikan keraguan Anda di kotak komentar dan juga membagikan postingan ini di media sosial dan dengan teman-teman Anda karena “Anda berbagi, saya berbagi, mari menyadarkan dunia”

Mengunggah file dengan memilih file dari desktop Anda dan kemudian mengklik tombol unduh untuk mengunggahnya sekarang sudah menjadi gaya lama. Pada artikel ini, kita akan mempelajari cara mengupload file secara langsung dengan menggunakan event drag and drop. Jadi, mari kita mulai

Membuat formulir seret dan lepas

Pertama kita akan membuat formulir dengan area unggah di mana Anda cukup menarik dan melepaskan file untuk diunggah. Di sini, di form ini, kita akan menyembunyikan elemen input kita dan mendesain area form menggunakan CSS

indeks. html

    
    

        
Drop files here to upload
        
or
        Select Files
    

Di bawah ini adalah HTML untuk menampilkan keluaran setelah file diunggah

    Upload Result
    
Uploading in progress
    

Menambahkan CSS ke formulir

Styling form untuk memberikan efek drag and drop dan memberikan tampilan form yang lebih baik

gaya. css

.form_area{
    width: 450px;
    margin: 0px auto;
}
.upload_result{
    height: 100px;
}
.form_input{
    display: none;
}
.upload_form{
    width: 100%;
    height: 250px;
    padding: 25px 0px;
    position: relative;
    font-size: 1.25rem;
    outline-offset: -10px;
    background-color: #c8dadf;
    outline: 2px dashed #323434;
    -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
    transition: outline-offset .15s ease-in-out, background-color .15s linear;
}
.upload_box{
    padding-top: 70px;
    text-align: center;
}
.upload_box h2{
    margin: 0;
    line-height: 1.4;
    font: 400 16px arial;
}
.upload_box p{
    padding: 0px 0 10px;
    font: bold 14px arial;
}
.upload_box label{
    color: #0071a1;
    margin: 12px 0;
    line-height: 3;
    padding: 10px 18px;
    border-radius: 6px;
    background: #f3f5f6;
    font: 400 14px Arial;
    border: 1px solid #0071a1;
}
.upload_status{
    display: none;
    margin: 2px 0;
    color: #ffffff;
    padding: 4px 5px;
    background: #445d54;
    font: 400 14px Arial;
}
.upload_status.success{
    display: block;
    background: green;
}
.upload_status.error{
    display: block;
    background: red;
}
.drag_start{
    outline-offset: -15px;
    outline-color: #c8dadf;
    background-color: #e6f3f7;
}
.image_box{
    float: left;
    width: 80px;
    height: 80px;
    margin: 0px 4px;
    overflow: hidden;
    border: 1px solid #000;
    box-shadow: 1px 1px 0px #000;
}
.image_box.loading{
    background-size: 40px;
    background: url(../icon/loader.gif) 10px no-repeat;
}
.image_box.error{
    background-size: 40px;
    background: url(../icon/warning.png) 10px no-repeat;
}
.image_box img{
    width: 100%;
}

Menangani acara drag-drop dan fungsionalitas Ajax

Kita sudah selesai dengan HTML dan CSS. Kami sekarang akan membuat skrip untuk menangani acara seret dan lepas & fungsi unggah. Pertama kami akan memeriksa apakah drag and drop didukung oleh browser atau tidak. Kemudian jika didukung, kami akan mencegah perilaku default dari acara drag-drop dan kami akan menangkap file yang dijatuhkan di area formulir. Setelah mendeteksi acara akhir seret, kami akan mengunggah file ke server menggunakan skrip ajax berbasis JavaScript dan menampilkan hasilnya di bawah formulir kami

naskah. js

Skrip PHP untuk mengunggah file di server

Sekarang setelah kita selesai dengan semua form dan skrip kontrol event kita. Kami sekarang akan membuat skrip PHP untuk memproses file yang dikirim ke server
Kami akan membuat skrip bernama pengunggah. php untuk mengunggah file kita di server dan akan mengembalikan hasilnya dalam format JSON. Juga, buat folder bernama unggahan untuk menyimpan file yang diunggah.  

pengunggah. php

Demo      Unduh

Di sini, di artikel di atas, kami belajar cara membuat fungsionalitas unggah file seret dan lepas. Saya telah menggunakan JavaScript murni untuk menghapus semua ketergantungan perpustakaan. Terima kasih telah membaca artikel ini. tolong berikan umpan balik penting Anda di bagian komentar di bawah ini