hujung hadapan web
tutorial js
Cara membina borang muat naik fail dengan ekspres dan dropzonejs
Cara membina borang muat naik fail dengan ekspres dan dropzonejs
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.
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>
(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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1654
14
1413
52
1306
25
1252
29
1225
24
Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan?
Apr 04, 2025 pm 02:42 PM
Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...
Demystifying JavaScript: Apa yang berlaku dan mengapa penting
Apr 09, 2025 am 12:07 AM
JavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.
Siapa yang dibayar lebih banyak Python atau JavaScript?
Apr 04, 2025 am 12:09 AM
Tidak ada gaji mutlak untuk pemaju Python dan JavaScript, bergantung kepada kemahiran dan keperluan industri. 1. Python boleh dibayar lebih banyak dalam sains data dan pembelajaran mesin. 2. JavaScript mempunyai permintaan yang besar dalam perkembangan depan dan stack penuh, dan gajinya juga cukup besar. 3. Faktor mempengaruhi termasuk pengalaman, lokasi geografi, saiz syarikat dan kemahiran khusus.
Bagaimana untuk mencapai kesan menatal paralaks dan kesan animasi elemen, seperti laman web rasmi Shiseido?
atau:
Bagaimanakah kita dapat mencapai kesan animasi yang disertai dengan menatal halaman seperti laman web rasmi Shiseido?
Apr 04, 2025 pm 05:36 PM
Perbincangan mengenai realisasi kesan animasi tatal dan elemen Parallax dalam artikel ini akan meneroka bagaimana untuk mencapai yang serupa dengan laman web rasmi Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ... ...
Evolusi JavaScript: Trend Semasa dan Prospek Masa Depan
Apr 10, 2025 am 09:33 AM
Trend terkini dalam JavaScript termasuk kebangkitan TypeScript, populariti kerangka dan perpustakaan moden, dan penerapan webassembly. Prospek masa depan meliputi sistem jenis yang lebih berkuasa, pembangunan JavaScript, pengembangan kecerdasan buatan dan pembelajaran mesin, dan potensi pengkomputeran IoT dan kelebihan.
Bagaimana untuk menggabungkan elemen array dengan ID yang sama ke dalam satu objek menggunakan JavaScript?
Apr 04, 2025 pm 05:09 PM
Bagaimana cara menggabungkan elemen array dengan ID yang sama ke dalam satu objek dalam JavaScript? Semasa memproses data, kita sering menghadapi keperluan untuk mempunyai id yang sama ...
Enjin JavaScript: Membandingkan Pelaksanaan
Apr 13, 2025 am 12:05 AM
Enjin JavaScript yang berbeza mempunyai kesan yang berbeza apabila menguraikan dan melaksanakan kod JavaScript, kerana prinsip pelaksanaan dan strategi pengoptimuman setiap enjin berbeza. 1. Analisis leksikal: Menukar kod sumber ke dalam unit leksikal. 2. Analisis Tatabahasa: Menjana pokok sintaks abstrak. 3. Pengoptimuman dan Penyusunan: Menjana kod mesin melalui pengkompil JIT. 4. Jalankan: Jalankan kod mesin. Enjin V8 mengoptimumkan melalui kompilasi segera dan kelas tersembunyi, Spidermonkey menggunakan sistem kesimpulan jenis, menghasilkan prestasi prestasi yang berbeza pada kod yang sama.
Bagaimana untuk melaksanakan fungsi seretan panel dan drop pelarasan yang serupa dengan vscode dalam pembangunan front-end?
Apr 04, 2025 pm 02:06 PM
Terokai pelaksanaan fungsi seretan panel dan drop panel seperti VSCode di bahagian depan. Dalam pembangunan front-end, bagaimana untuk melaksanakan vscode seperti ...
