Proyek simpul sederhana yang mengimplementasikan unggahan drag-and-drop multi-file dapat diunduh di GitHub. Anda dapat mengunduhnya terlebih dahulu: https://github.com/johnharvy/uploadfiles/.
Buka kunci paket format zip yang diunduh. Disarankan untuk menggunakan Webstom untuk menjalankan proyek dan memulai proyek melalui App.Js. Jika prompt adalah bahwa lingkungan eksekusi Node.exe tidak dapat ditemukan, harap tentukan lokasi instalasi Node.exe Anda. Kerangka kerja ekspres yang saya gunakan di sini adalah versi 3.21.2.
Mari kita perkenalkan secara singkat bagaimana efek drag and drop tercapai.
Mari kita lihat kode terlebih dahulu:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <script src = "js/jquery.js"> </script> <script src = "js/eventutil.js"> </skrip> <itement> title> unggah </title> <latar belakang>: latar belakang#100px "{a 100px" </script> <itle> unggahan </title> <ponder> <latar belakang#: latar belakang#100px "{a 100px" {latar belakang> <100 #aaaaaa; Teks-Align: tengah; garis-tinggi: 100px; warna: rgba (81, 49, 202, 0.72); margin: 150px otomatis;} </style> </head> <bod> <v id = "a1"> Seret ke </div> <div id = "out-input"> </var> a1 = document.getElementById ("a1"); function handleevent (event) {var info = "", output = document.getElementById ("out-input"), file, i, len; eventutil.preventdefault (event); // Perilaku default dari peristiwa pemblokiran var formdata = formData baru (); if (event.type == "drop") {file = event.dataTransfer.files; i = 0; len = file.length; while (i <len) {info +file [i] .name +"(" +file [i]. +"bytes)<br/>";formData.append("file"+i,files[i]);i++;}output.innerHTML = info;$.ajax({type:"post",url:"/uploadFile",data:formData,async: false,cache: false,contentType: false,processData: false, //Here we specify the operation to not read the string by default for uploading data success:function(rs){console.log(rs);},error:function(r){alert("A file upload error!");}});}}EventUtil.addHandler(a1, "dragover", handleEvent);EventUtil.addHandler(a1, "drop", handleEvent);EventUtil.addHandler(a1, "drop", handleevent); </script> </body> </html>Konten HTML sangat sederhana, satu menampilkan rentang drag yang diizinkan, dan satu digunakan untuk menampilkan konten file yang diunggah.
Bagian JS:
Di sini saya telah menyiapkan objek antarmuka acara, yang juga dapat Anda anggap sebagai perpustakaan kecil untuk menangani acara. Fungsinya adalah merangkum metode yang berbeda untuk mengikat peristiwa yang sama di setiap browser. Untuk mengimplementasikan metode pengikatan peristiwa umum dari setiap browser, itu diimplementasikan secara seragam menggunakan objek Eventutil. Anda cukup melihat kode implementasinya, yang sangat sederhana.
Ketika browser mendeteksi tiga peristiwa drag, "drager", "dragover", dan perilaku default "seret" akan diblokir, dan acara khusus kami akan dieksekusi ketika situasi "seret" adalah "seret".
Karena kami mengunggah file, kami menggunakan instance FormData di sini. Tambahkan file ke objek melalui append () untuk menjadi file antrian. Setelah mengunggah ke server, itu akan diuraikan menjadi objek atribut dalam urutan antrian. Dalam acara tersebut, file -file yang disimpan dalam acara tersebut diambil melalui "Event.DataTransfer.files".
Hal lain yang perlu diperhatikan di sini adalah bahwa metode AJAX dari jQuery perlu mengkonfigurasi ProcessData menjadi false saat mengunggah objek file, yang berarti tidak menggunakan operasi string baca default. Alasannya adalah bahwa secara default, jika data masuk melalui opsi data adalah objek (secara teknis, selama itu bukan string), itu akan diproses dan dikonversi menjadi string kueri agar sesuai dengan tipe konten default "Aplikasi/X-WWW-Form-Burlencoded". Jika Anda ingin mengirim informasi pohon DOM atau informasi lain yang tidak ingin Anda konversi, Anda perlu mengaturnya ke False.
Setelah unggahan file berhasil diunggah, konsol akan mencetak informasi "{Infor:" Success "}".
Pada titik ini, bagian front-end berakhir. Mari kita lihat kode di sisi node.js.
Struktur file adalah sebagai berikut:
Mari kita lihat konten di rute - app.js:
var express = membutuhkan ('express'); var routes = membutuhkan ('./ rute'); var user = membutuhkan ('./ rute/pengguna'); var http = membutuhkan ('http'); var path = membutuhkan ('path'); var app = express (); // semua lingkungan ('port', port ', process.env.port || 'Jade'); app.use (express.favicon ()); app.use (express.logger ('dev')); app.use (express.json ()); app.use (express.urlencoded ())) ; app.use (express.methodoverride ()); app.use (app.router); app.use (express.static (path.join (__ dirname))); exports.app = app; var unggaha = memerlukan ("./ Action/Fileupload"); // Routing Event Mendengarkan UploadAction.UploadTest.UploadFile (); // File Unggah hanya mengunggah ('pengembangan' == app.get ('env')) {app.use (express.errorhandler ());} app.get ('//s pengguna', user.list); http.createServer (app) .listen (app.get ('port'), function () {console.log ('Express Server Mendengarkan di port' + app.get ('port'));});Ada beberapa perbedaan dari aplikasi awal. Saya mengekspor objek aplikasi untuk menggunakannya kembali di fileupload.js, dan kemudian memperkenalkan modul Fileupload.js, dan memperoleh objek unggahan yang menyimpan semua metode modul melalui objek antarmuka ini dan disebut metode unggahan.
Oke, akhirnya mari kita lihat file fileupload.js:
var multipart = membutuhkan ('connect-multiparty'); var app = membutuhkan ("../ app"); var path = membutuhkan ('path'); var fs = membutuhkan ("fs"); var app = app.app; var unggahtest = {}; function unggah () {app.post ("/unggah unggah", function; function; function () {app.post ("/unggah unggah", multipart; function; function; null) {if (req.files ["file"+i]) unggah (i); else {i = null res.json ({infor: "Success"}); return;} i ++;} // unggah fungsi file antrian (indeks) {var filename = req.files ["+atau indeks .or]. atau indeks. path.baseneame (req.files ["file" + index] .path); // antarmuka path dapat menentukan jalur dan nama file file. " fs.creatreeadStream (req.files ["file"+index] .path) .pipe (fs.createWriteStream (targetPath));}});} unggahtest.uploadfile = unggah;Nodej selalu sangat sederhana dan kuat, dan sangat kreatif, itulah sebabnya saya menyukainya. Kami melihat bahwa sebenarnya ada sangat sedikit kode kunci di sini. Saya akan secara singkat memperkenalkan proses logis menerapkan unggahan file:
• Dapatkan nama file dari file yang diunggah
• Atur lokasi penyimpanan file dan nama file
• Baca aliran konten file dan buat file baru untuk menulis aliran konten
Untuk mengunggah banyak file, saya juga melakukan beberapa operasi yang cocok, yang sangat intuitif dan tidak sulit dipahami.
Setelah file berhasil diunggah, itu akan muncul di bawah file unggahan di bawah file publik.
Modul yang digunakan dalam file dicatat dalam package.json. Mereka dapat diinstal melalui perintah "Instal NPM" dengan memasukkan alamat direktori package.json tingkat simultan. Jika Anda menjalankan file proyek yang diunduh di GitHub secara langsung, Anda tidak perlu menginstalnya lagi.
Di atas adalah metode implementasi menggabungkan NodeJs dan HTML5 untuk mengunggah banyak file ke server. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!