Php seret dan lepas unggahan file

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

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

• Seret dan Jatuhkan Susun ulang dengan jQuery, PHP & MySQL

Jadi mari kita buat contoh upload file drag and drop dengan jQuery dan PHP. Struktur file untuk contoh berikut

• indeks. php
• mengunggah. js
• mengunggah. php

Langkah1. Sertakan File jQuery dan Dropzone

Karena 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="//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 Lepas

Sekarang 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 jQuery

Di 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 Server

Sekarang 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 MySQL

Karena 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