1. Pendahuluan
Unggah file adalah fungsi yang relatif umum. Metode pengunggahan tradisional lebih merepotkan. Anda harus mengklik tombol Unggah terlebih dahulu, kemudian temukan jalur ke file, lalu unggah. Ini membawa masalah besar bagi pengalaman pengguna. HTML5 mulai mendukung drag dan lepas API yang diperlukan untuk mengunggah. Nodejs juga merupakan teknologi yang semakin populer. Ini juga pertama kalinya saya terlibat dalam nodeJs. Dalam pengembangan NodeJS, salah satu kerangka kerja pengembangan yang paling umum digunakan adalah Expess, yang merupakan kerangka kerja yang mirip dengan pola MVC. Dikombinasikan dengan HTML5 dan NodeJs Express, fungsi drag dan lepas unggah terwujud.
2. Populerisasi Pengetahuan Dasar
1. Pengetahuan dasar nodej
Sederhananya, NodeJS adalah platform pengembangan yang memungkinkan JS berjalan di sisi server. NodeJs berkembang sangat cepat, dan banyak perusahaan domestik juga mulai menggunakannya, seperti Taobao. Platform pengembangan aplikasi web tradisional bergantung pada multi-threading untuk mencapai tanggapan permintaan yang berkonsumsi tinggi. NodeJS mengadopsi IO satu utas, asinkron, dan model desain yang digerakkan oleh acara, yang membawa peningkatan kinerja yang sangat besar pada nodej. Ini juga merupakan fitur terbesar dari nodeJs. Di NodeJs, semua operasi IO dilakukan melalui panggilan balik. Ketika NodeJS menjalankan operasi IO, itu akan mendorong permintaan IO ke antrian acara, tunggu program untuk memprosesnya, dan kemudian hubungi fungsi panggilan balik untuk mengembalikan hasilnya.
Misalnya, saat menanyakan database, operasi adalah sebagai berikut:
mysql.query ("SELECT * from mytable", function (res) {callback (res);});Dalam kode di atas, ketika nodeJS menjalankan pernyataan di atas, tidak akan menunggu database untuk mengembalikan hasilnya, tetapi akan terus menjalankan pernyataan berikut. Setelah database memperoleh data, itu akan dikirim ke antrian loop acara. Hal panggilan balik akan dieksekusi hanya setelah utas memasuki antrian loop acara.
Saya telah membaca lebih lanjut tentang nodej selama dua hari dan tidak tahu banyak. Untuk mempelajari lebih lanjut, Anda dapat mencari di internet.
Pengetahuan tentang memulai dengan nodeJs http://www.nodebeginner.org/index-zh-cn.html //www.vevb.com/article/48755.htm
2. Pengetahuan Dasar Express
NodeJS adalah komunitas open source yang relatif aktif dengan sejumlah besar perpustakaan pengembangan pihak ketiga, di antaranya Express adalah salah satu kerangka kerja paling luas dan paling umum digunakan. Ini juga merupakan kerangka kerja resmi yang direkomendasikan oleh NodeJS. Selain enkapsulasi operasi HTTP umum, ia juga mengimplementasikan kontrol perutean, dukungan resolusi templat, upaya dinamis, balasan pengguna, dll. Tetapi juga bukan kerangka kerja yang mahakuasa. Sebagian besar fungsi adalah enkapsulasi HTTP, itu hanya kerangka kerja yang ringan. Banyak fungsi juga perlu diintegrasikan ke dalam perpustakaan pihak ketiga dan diimplementasikan.
Exress memberikan dukungan untuk fungsi unggahan yang sangat nyaman. Setelah permintaan unggahan file, Express akan menerima file dan menyimpan file di direktori sementara. Kemudian dalam metode routing, kami hanya perlu menyalin file dari direktori sementara ke folder yang ingin kami simpan unggahan pengguna. Di bagian unggahan file, implementasi sisi server didasarkan pada fungsi Express.
3. HTML5 Seret dan Unggah API
HTML5 menyediakan banyak fitur baru, acara seret, dan unggahan file adalah salah satu fitur baru. Karena ruang yang terbatas, implementasi kode yang diunggah drag-up akan disorot nanti. Saya tidak akan mencantumkan API yang diunggah drag yang disediakan oleh HTML5 satu per satu. Jika Anda tertarik, silakan merujuk ke: http://w3school.com.cn/html5/html5_ref_eventattributes.asp#mouse_events //www.vevb.com/html5/85977.html
3. Seret dan unggah untuk mencapai
1. Implementasi Kode
Mari pertama-tama lihat direktori file JS front-end:
di dalam:
unggah.js terutama mengimplementasikan enkapsulasi fungsi unggahan yang didukung oleh HTML5.
unggahanerqueue.js terutama mengimplementasikan manajemen mengunggah antrian file dan mengunggah file, mengunggah file dalam antrian file ke server.
Pintu masuk utama untuk mengunggah file unggahan, yang terutama mengimplementasikan jendela unggahan untuk mendengarkan acara seret dan mendorong file yang diseret ke dalam antrian file unggahan, dan memulai program unggahan file.
Berikut ini adalah penjelasan sederhana tentang kode inti (diperlukan). Semua kode dapat diunduh di sini: Fileuploader
Pertama, cukup balas pengunggah.js untuk mengunggah file yang disediakan oleh HTML5
fungsi pengunggah (url, data, file) {this._files = file; this._data = data; this._url = url; this._xhr = null; this.onloadStart = {}; this.onloadEnd = {}; this.onprogress = {}; this.onError = {}; this.onTimeout = {}; this.callback = {}; // callback setelah permintaan selesai_self = ini; } unggahan.prototype = {init: function () {if (! isValid ()) {throw e; } this._xhr = new xmlhttpRequest (); this._bindevents (); }, kirim: function () {if (this._xhr == null) {this.init (); } var formdata = this._createFormData (); this._xhr.open ('post', this._url, true); this._xhr.send (formdata); }, _bindevents: function () {_self = this; this._xhr.upload.loadStart = function (e) {evalfunction (_self.onloadStart, e); } this._xhr.upload.onload = function (e) {evalfunction (_self.onload, e); }; this._xhr.upload.onloadEnd = function (e) {evalfunction (_self.onloadEnd, e); } this._xhr.upload.onprogress = function (e) {evalfunction (_self.onprogress, e); }; this._xhr.upload.onError = function (e) {evalfunction (_self.onError, e); }; this._xhr.upload.onTimeout = function (e) {evalfunction (_self.onTimeout, e); } this._xhr.onReadyStateChange = function () {if (_self._xhr.readyState == 4) {if (typeof _self.callback === 'function') {var status = _self._xhr.status; var data = _self._xhr.Responsetext; _Self.callback (status, data); }}}}}, _createFormData: function () {var formdata = formData baru (); this._adddataToformData (formdata); this._addfiletoformData (formdata); mengembalikan formdata; }, _AdDDATATOFORMData: function (formdata) {if (this._data) {for (var item di this._data) {formData.append (item, this._data [item]); }}}, _addfiletoformData: function (formdata) {if (this._files) {for (var i = 0; i <this._files.length; i ++) {var file = this._files [i]; formdata.append ('file [' + i + ']', this._files [i]); }}}}}; Lihat codevar unggahanerFactory = {send: function (url, data, file, callback) {var insuploader = unggah baru (url, data, file); insUploader.callback = function (status, resData) {if (typeOf callback === 'function') {callback (status, resData); }} insuploader.send (); mengembalikan insuploader; }};Objek pengunggah terutama hanya merangkum API asli yang disediakan oleh HTML5. DeevloaderFactory menyediakan antarmuka sederhana, yang dapat dilakukan seperti metode AJAX JQuery, panggilan unggahan file. Dukungan untuk unggahan file yang disediakan dalam HTML5 adalah untuk memperluas beberapa properti dan metode berdasarkan XMLHTTPRequest asli, dan menyediakan objek FormData untuk mendukung operasi pengunggahan file.
Antrian unggahan file (unggahuqueueue.js) juga merupakan objek yang relatif penting. Ini termasuk dua objek, satu adalah antrian, objek antrian file, yang terutama bertanggung jawab untuk mengelola penambahan, penghapusan, modifikasi, dan permintaan antrian file. Objek lainnya adalah UploadEngine, mesin unggahan file. Fungsinya terutama bertanggung jawab untuk mengambil objek file dari antrian file, memanggil objek pengunggah untuk mengunggah file, dan kemudian memperbarui status file dalam antrian file. Antrian dan unggah adalah objek singleton.
Pertama, mari kita lihat objek antrian file:
(function (upladerqueue) {var status = {siap: 0, mengunggah: 1, lengkap: 2} var _self = null; var instance = null; function queue () {this._datas = []; this._cursize = 0; // function_self = this; this;} queue.prototype = {{{{{{{{{{{ini; this._datas. {var index._getIndExbykey (Key); this._getIndExbykey (key); if (index! = -1) {this._datas [index] .status = status}}, nextreadingIndex: function () {for (var i = 0; i <this._datas.length; i ++) {if (this. }} return -1; }, getDataByIndex: function (index) {if (index <0) {return null; } return this._datas [index]; }, _getIndexByKey: function (key) {for (var i = 0; i <this._datas.length; i ++) {if (this._datas [i] .key == key) {return i; }} return -1; }}; function getInstace () {if (instance === null) {instance = new queue (); instance return; } else {return instance; }} uDladerqueue.queue = getInstance (); upladerqueue.uploadstatus = status;}) (window.uploaderqueue);Antrian file unggah menggunakan array untuk mengelola informasi dari setiap objek file. Setiap objek file memiliki tiga atribut: kunci, data, dan status. Objek ini terutama bertanggung jawab atas fungsi menambahkan, menghapus, memperbarui, dan mencari objek file.
Objek lain yang lebih penting dalam antrian file unggah adalah objek unggahan engine (unggahEngine.js)
(function (upladerqueue) {var instance = null; var _self; function unggahEngine () {this._url = null; this._curuploadingkey = -1; // flag this.uPloadStatusChanged = {}; this.uploadItempress = {}; {{{}; this.uploadItempress = {}; {{{}; this.uploadItempress = {}; {{{{}; this.uploadItempress = {}; {{{{{this (URL) {this._url = url;}, run: function () {if (this._curuploadingkey === -1 && this._url) {this._startupload (); {this._uploaditem (indeks); unggahanerfactory.send (this._url, null, data.file, function (status, data) {_self._completeduploaditem.call (_self, status, data);}); _Self.UploadItemprogress (_self._curuploadingkey, e); }}, _readyuploadItem: function (index) {this._curuploadingkey = uDladerqueue.queue.getDatabyIndex (index) .key; if (typeOf this.uploadstatusChanged === 'function') {this.uploadstatusChanged (this._curuploadingkey, uDladerqueue.uploadStatus.uploading); } uDladerqueue.queue.setitemstatus (this._curuploadingkey, uDladerqueue.uPloadStatus.uploading); }, _completeduploadItem: function (status, data) {if (typeof this.uploadStatusChanged === 'function') {this.uploadStatusChanged (this._curuploadingkey, upladerqueue.uploadstatus.complete); } uDladerqueue.queue.setitemStatus (this._curuploadingkey, uDladerqueue.uPloadStatus.Complete); this._startupload (); }}; function getInstace () {if (instance === null) {instance = new unggahanEngine (); } return instance; } uDladerqueue.Engine = getInstace ();}) (window.uploaderqueue);Objek ini relatif sederhana dan terutama menyediakan metode run dan setUrl, yang digunakan untuk menyalakan mesin unggahan dan mengatur jalur unggahan. Metode rekursif digunakan secara internal untuk mengunggah semua metode dalam antrian file ke server. Gunakan unggahanItemprogress untuk memberi tahu kemajuan unggahan eksternal, dan gunakan unggahan yang bersikap untuk memberi tahu status unggahan file untuk memperbarui UI.
DeevloaderApp.js Terutama mencakup tiga objek, satu adalah objek jQuery sederhana (aplikasi $) mirip dengan jQuery. Terutama digunakan untuk acara yang mengikat. Salah satunya adalah objek unggah, yang merupakan area jendela yang diseret dan diunggah, dan yang lainnya adalah objek masuk, objek unggaherMain. Ini terutama digunakan untuk menginisialisasi objek, memberikan metode init ke luar untuk menginisialisasi seluruh objek.
Untuk mempelajari tentang kode tentang aplikasi $ dan unggaheRarea, silakan unduh kode sumbernya. Berikut ini hanya penjelasan singkat tentang objek unggahan.
(function (app) {var _self; function unggaherMain (id) {this._id = id; this._area = null; this.uploaders = []; this._url = 'file/unggah';} unggah, {} this. _Initqueueeng: function () {unggah muatan.engine.setUrl (this._url); unggahanequeue.uploadstatus. Math.round (Progress * 100)); unggahanequeue.engine.run (); }}}; app.main = unggahMain; }) (window.uploaderApp);Objek unggaherMain setara dengan perantara antara masing -masing objek, terutama untuk membuat fungsi inisialisasi objek dan saling memanggil di antara objek. Buat setiap objek berkolaborasi satu sama lain untuk menyelesaikan fungsi seluruh modul. Berikan metode init untuk menginisialisasi seluruh program. Di halaman HTML, hanya perlu kode berikut:
<script type = "text/javaScript"> var main = new unggahamp.main ('container'); main.init (); </script>Kode di atas adalah membuat objek entri dan kemudian menggunakan metode init untuk memulai seluruh program.
Di atas adalah penjelasan sederhana tentang metode utama JS front-end. Jika Anda ingin tahu lebih banyak, silakan unduh kode sumbernya. Mari kita lihat kode utama implementasi sisi backend JS (NODEJS).
Dalam dasar -dasar Express, kami telah mengatakan bahwa fungsi unggahan file telah sepenuhnya dienkapsulasi di Express. Saat rute untuk bertindak, file telah diunggah hanya jika file diunggah ke direktori sementara. Kami dapat mengonfigurasi direktori sementara ini di App.js. Metode konfigurasi adalah sebagai berikut:
app.use (express.bodyparser ({unggah: __ dirname+'/public/temp'}));Dengan cara ini, setelah file diunggah, file disimpan di direktori /publik /temp, dan nama file juga diperoleh secara acak oleh Express melalui algoritma tertentu. Dalam tindakan yang kami tulis, kami hanya perlu memindahkan file di direktori sementara ke direktori tempat file disimpan di server, dan kemudian menghapus file di direktori sementara. Kode spesifiknya adalah sebagai berikut:
function unggah (req, res) {if (req.files! = 'tidak disimen') {console.dir (req.files); utils.mkdir (). lalu (function (path) {unggahfile (req, res, path, 0);}); }} function uploadFile (req, res, path, index) {var temppath = req.files.file [index] .path; var name = req.files.file [index] .name; if (temppath) {var rename = janji.denodeify (fs.rename); Rename (Temppath, Path + Name) .then (function () {var unlink = janji.denodey (fs.unlink); unlink (Temppath);}). Kemudian (function () {if (index == req.files.file.length - 1) {var res = {kode: 1, dese: 'unggah dengan sukses' unggah (req, res, path, index + 1); }}2. Sadarilah efeknya
4. Dapatkan kodenya
Alamat Unduh Kode: //www.vevb.com/jiaoben/202117.html