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 Show
Membuat formulir seret dan lepasPertama 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
Di bawah ini adalah HTML untuk menampilkan keluaran setelah file diunggah _Menambahkan CSS ke formulirStyling form untuk memberikan efek drag and drop dan memberikan tampilan form yang lebih baik gaya. css
Menangani acara drag-drop dan fungsionalitas AjaxKita 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 serverSekarang setelah kita selesai dengan semua form dan skrip kontrol event kita. Kami sekarang akan membuat skrip PHP untuk memproses file yang dikirim ke server 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 Dalam tutorial kami sebelumnya, Anda telah belajar menerapkan Ekspor Tabel HTML ke Excel menggunakan jQuery. Dalam tutorial ini Anda akan belajar bagaimana mengimplementasikan drag and drop upload file dengan jQuery dan PHP Unggah file adalah fungsi umum untuk mengunggah file ke server dengan tombol telusuri. Sekarang Anda dapat dengan mudah meningkatkan fungsionalitas pengunggahan file untuk memungkinkan pengguna mengunggah file dengan drag and drop dan juga melalui penjelajahan file. Pengunggahan file seret dan lepas lebih ramah pengguna karena hanya perlu menyeret dan melepaskan file di dalamnya dan file secara otomatis diunggah ke server melalui AJAX Jadi jika Anda mencari untuk mengimplementasikan fungsionalitas unggahan file seret dan lepas, maka Anda berada di sini di tempat yang tepat. Kami akan menggunakan plugin jQuery DropzoneJS untuk menangani fungsi unggah file seret dan lepas. Tutorial dijelaskan dalam langkah-langkah mudah dengan demo langsung dan tautan untuk mengunduh kode sumber demo langsung Baca juga
Jadi mari kita buat contoh upload file drag and drop dengan jQuery dan PHP. Struktur file untuk contoh berikut
Langkah1. Sertakan File jQuery dan DropzoneKarena kami akan menangani upload file drag abd drop menggunakan plugin DropzoneJS jQuery, jadi kami akan menyertakan file plugin jQuery dan DropzoneJS. Kami akan menyertakan unggahan file konfigurasi khusus plugin DropzoneJS. js untuk menangani unggahan ke sisi server <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="dropzone/dropzone.css" /> <script type="text/javascript" src="dropzone/dropzone.js"></script> <script type="text/javascript" src="js/upload.js"></script> Langkah2. Rancang Bagian Unggah File Seret dan LepasSekarang di index. php, kami akan mendesain bagian upload file drag and drop menggunakan kelas CSS DropzoneJS <div class="dropzone"> <div class="dz-message needsclick"> <strong>Drop files here or click to upload.</strong><br /> <span class="note needsclick">(This is just a demo. The selected files are <strong>not</strong> actually uploaded.)</span> </div> </div>_ Langkah3. Tangani Pengunggahan File Seret dan Jatuhkan dengan plugin DropzoneJS jQueryDi unggah. js, kami akan menangani upload file drag and drop menggunakan fungsi plugin DropzoneJS dropzone() dengan opsi plugin untuk mengkustomisasi fungsi upload drag and drop. Karena kami akan mengunggah file ke server dan ke dalam tabel database MySQL, maka kami akan memberikan unggahan. php untuk membuat permintaan Ajax ke sisi server untuk menangani pengunggahan file di sisi server $(document).ready(function(){ $(".dropzone").dropzone({ url: 'upload.php', width: 300, height: 300, progressBarWidth: '100%', maxFileSize: '5MB' }) }); Langkah4. Tangani Pengunggahan File di Sisi ServerSekarang di unggah. php, kami akan menangani fungsionalitas untuk mengunggah file di sisi server dan juga menangani detail file yang diunggah yang dimasukkan ke dalam unggahan tabel database MySQL <?php include_once("db_connect.php"); if(!empty($_FILES)){ $uploadDir = "uploads/"; $fileName = $_FILES['file']['name']; $uploadedFile = $uploadDir.$fileName; if(move_uploaded_file($_FILES['file']['tmp_name'],$uploadedFile)){ $mysqlInsert = "INSERT INTO uploads (file_name, upload_time)VALUES('".$fileName."','".date("Y-m-d H:i:s")."')"; mysqli_query($conn, $mysqlInsert); } } ?>_ Langkah5. Buat Tabel Basis Data MySQLKarena kami telah menangani fungsionalitas untuk memasukkan detail file yang diunggah ke tabel database MySQL. Jadi kita akan membuat unggahan tabel menggunakan kueri pembuatan tabel di bawah ini untuk menyisipkan rekaman ke tabel ini |