Cara membina borang muat naik fail dengan ekspres dan dropzonejs-tutorial js-php.cn

Cara membina borang muat naik fail dengan ekspres dan dropzonejs

Lisa Kudrow

Lepaskan： 2025-02-10 09:42:11

asal

523 orang telah melayarinya

dropzone.js: alat yang berkuasa untuk meningkatkan borang muat naik fail

Borang muat naik fail sering menyusahkan: Pemaju tidak mahu membina, pereka tidak mahu mencantikkan, dan pengguna tidak mahu mengisi. Perkara yang paling mengecewakan ialah kawalan fail itu sendiri - gaya sukar untuk disesuaikan, penggunaannya canggung, dan memuat naik fail juga boleh melambatkan penyerahan borang.

Plug-in dropZone.js muncul, yang dapat meningkatkan penampilan dan pengalaman pengguna kawalan muat naik fail dan memuat naik fail di latar belakang melalui Ajax, sekurang-kurangnya membuat proses muat naik kelihatan lebih cepat. Di samping itu, ia boleh mengesahkan fail sebelum mereka tiba di pelayan, memberikan pengguna maklum balas yang hampir-hampir.

Artikel ini akan menyelam ke dropzone.js, menunjukkan cara melaksanakannya, dan bagaimana untuk menyesuaikan dan menyesuaikannya. Kami juga akan melaksanakan mekanisme muat naik sisi pelayan yang mudah menggunakan node.js.

Kod telah dimuat naik ke repositori GitHub.

mata utama

dropZone.js meningkatkan borang muat naik fail di Express dengan membolehkan seret dan drop, menyediakan pengesahan fail segera, dan meningkatkan estetika antara muka pengguna.
Untuk menubuhkan dropZone.js, masukkan fail JavaScript dan CSS di HTML, dan anda boleh memilih untuk menyesuaikan dengan gaya minimum atau lanjutan.
Konfigurasi asas memerlukan menetapkan URL sasaran untuk muat naik, serta pilihan lain untuk kaedah HTTP, parameter fail dan bar kemajuan, imej kecil dan elemen UI yang lain.
Ciri -ciri lanjutan termasuk menetapkan saiz fail maksimum, mengehadkan jenis fail, dan thumbnails tersuai dan mesej ralat.
DropZone.js menyokong pemprosesan acara untuk memuat naik, menambahkan atau memadam fail yang berjaya, dan menghasilkan lakaran kecil, yang membolehkan penyesuaian selanjutnya berdasarkan peristiwa -peristiwa ini.
Multer middleware boleh digunakan untuk mengendalikan muat naik fail untuk mencapai integrasi sisi pelayan dengan node.js dan ekspres, dan pengendalian ralat tambahan dan tetapan tindak balas ditambah untuk memastikan keserasian dengan dropZone.js.

Pengenalan kepada dropzone.js

dropZone.js membolehkan pengguna memuat naik fail menggunakan seret dan drop. Walaupun faedah kebolehgunaannya boleh dikatakan dengan munasabah, ini adalah pendekatan yang semakin biasa dan konsisten dengan cara ramai orang menggunakan fail desktop. Ia juga disokong dengan baik dalam pelayar utama.

Walau bagaimanapun, dropZone.js lebih daripada sekadar widget berasaskan seret dan drop. Mengklik pada widget akan melancarkan kaedah dialog pemilih fail yang lebih tradisional.

~~Anda boleh menggunakan dropzone.js untuk sebarang jenis fail, walaupun kesan kecil kecil yang indah menjadikannya sangat sesuai untuk memuat naik imej.~~

Ciri -ciri

Beberapa ciri dan ciri dropzone.js diringkaskan seperti berikut:

boleh digunakan dengan atau tanpa jQuery
Sokongan seret dan drop
Menjana imej kecil
menyokong pelbagai muat naik, anda boleh memilih untuk memuat naik selari
Termasuk bar kemajuan
penuh tema mesra
Termasuk sokongan pengesahan fail extensible
boleh digunakan sebagai modul AMD atau modul memerlukan
saiznya adalah kira -kira 43kb selepas pengurangan, dan kira -kira 13kb selepas mampatan gzip

Sokongan penyemak imbas

Menurut dokumentasi rasmi, penyemak imbas menyokong yang berikut:

Chrome 7
Firefox 4
iaitu 10
Opera 12 (MACOS Versi 12 dilumpuhkan kerana API yang cacat)
Safari 6

Tetapan

Cara paling mudah untuk menggunakan dropzone.js adalah untuk memasukkan versi terkini dari CDN. Pada masa menulis ini, ini adalah versi 5.5.1.

Sebagai alternatif, anda boleh memuat turun versi terkini dari halaman GitLab Projek. Terdapat juga pakej pihak ketiga yang memberikan sokongan untuk ReactJs.

Kemudian, pastikan anda memasukkan fail JavaScript utama dan gaya CSS di halaman. Contohnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>File Upload Example</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css">
</head>
<body>
  <🎜>
</body>
</html>

Salin selepas log masuk

Perhatikan bahawa projek ini menyediakan dua fail CSS -fail asas.css dengan beberapa gaya minimum, dan fail dropzone.css yang lebih luas. Minimum versi dropzone.css dan dropzone.js juga disediakan.

(Kandungan berikutnya adalah serupa dengan teks asal, tetapi struktur kata-kata dan perenggan akan diselaraskan untuk mencapai kesan pseudo-asal dan mengekalkan kedudukan imej tidak berubah. ditinggalkan di sini.)

Atas ialah kandungan terperinci Cara membina borang muat naik fail dengan ekspres dan dropzonejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!