1. Предисловие
Загрузка файла является относительно распространенной функцией. Традиционный метод загрузки более хлопот. Сначала вам нужно нажать кнопку загрузки, затем найти путь к файлу, а затем загрузить ее. Это приносит большие проблемы с пользовательским опытом. HTML5 начинает поддерживать перетаскивание требуемого API для загрузки. Nodejs также является технологией, которая в последнее время становится все более популярной. Это также мой первый раз, чтобы принять участие в Nodejs. В разработке Nodejs одной из наиболее часто используемых рамках разработки является Expess, которая представляет собой основу, аналогичную шаблону MVC. В сочетании с HTML5 и NodeJS Express реализуется функция перетаскивания и высадки.
2. Популяция базовых знаний
1. Основные знания Nodejs
Проще говоря, Nodejs - это платформа разработки, которая позволяет JS работать на стороне сервера. Nodejs развивается очень быстро, и многие отечественные компании также начали использовать его, такие как Taobao. Традиционные платформы разработки веб-приложений полагаются на многопоточное для достижения ответов на запросы с высоким содержанием. Nodejs применяет однопоточную, асинхронную ввода-вывода и модель дизайна, управляемая событиями, которая привносит огромные улучшения производительности для Nodejs. Это также самая большая особенность Nodejs. В Nodejs все операции ввода -вывода выполняются с помощью обратных вызовов. Когда Nodejs выполняет операции IO, он подтолкнет запрос IO в очередь событий, подождите, пока программа обработает ее, а затем вызовет функцию обратного вызова, чтобы вернуть результат.
Например, при запросе базы данных операция заключается в следующем:
mysql.query ("select * from mytable", function (res) {callback (res);});В приведенном выше коде, когда Nodejs выполняет приведенный выше оператор, он не будет ждать, пока база данных вернет результат, но продолжит выполнять следующее оператор. После получения базы данных она будет отправлена в очередь цикла событий. Обратный вызов будет выполнен только после того, как поток выйдет в очередь цикла событий.
Я читал больше о Nodejs в течение двух дней и мало что знаю. Чтобы узнать больше, вы можете искать в Интернете.
Знание о начале работы с nodejs http://www.nodebeginner.org/index-zh-cn.html //www.vevb.com/article/48755.htm
2. Основные знания экспресса
Nodejs является относительно активным сообществом с открытым исходным кодом с большим количеством сторонних библиотек развития, среди которых Express является одной из наиболее обширных и наиболее широко используемых рамок. Это также официальная структура, рекомендованная Nodejs. В дополнение к инкапсуляции общих операций HTTP, он также реализует управление маршрутизацией, поддержку разрешения шаблона, динамические попытки, ответ пользователя и т. Д., Но это также не всемогущая структура. Большинство функций являются инкапсуляцией HTTP, это всего лишь легкая структура. Многие функции также должны быть интегрированы в сторонние библиотеки и реализованы.
Exress обеспечивает поддержку очень удобных функций загрузки. После запроса загрузки файла Express получит файл и сохранит файл во временном каталоге. Затем в методе маршрутизации нам просто нужно скопировать файл из временного каталога в папку, которую мы хотим сохранить загрузку пользователя. В части загрузки файла реализация на стороне сервера основана на функции Express.
3. html5 перетаскивать и загружать API
HTML5 предоставляет множество новых функций, события перетаскивания и загрузка файлов являются одной из новых функций. Из-за ограниченного пространства реализация загруженного кода перетаскивается позже. Я не буду перечислить загруженный API -API, предоставленный HTML5 один за другим. Если вы заинтересованы, пожалуйста, см.
3. Перетащите и загружайте, чтобы достичь
1. Реализация кода
Давайте сначала посмотрим на файл каталог фронтального JS:
в:
uploader.js в основном реализует инкапсуляцию функции загрузки, поддерживаемой HTML5.
uploaderqueue.js в основном реализует управление загрузкой очередей файлов и объектами загрузки файлов, загружает файлы в очередь файлов на сервер.
Основной вход в загрузку файла uploaderApp.js, который в основном реализует окно загрузки, чтобы прослушать события перетаскивания и вставать на перетаскиваемые файлы в очередь файла загрузки и запускает программу загрузки файла.
Ниже приведено простое объяснение кода основного кода (необходимо). Все коды можно загрузить здесь: FileUploader
Во -первых, просто инкапсулируйте uploader.js для загрузки файлов, предоставленных HTML5
функция uploader (url, data, files) {this._files = files; this._data = data; this._url = url; this._xhr = null; this.onloadstart = {}; this.onloadend = {}; this.onprogress = {}; this.onerror = {}; this.ontimeout = {}; this.callback = {}; // обратный вызов после запроса } uploader.prototype = {init: function () {if (! isvalid ()) {throw e; } this._xhr = new xmlhttprequest (); this._bindevents (); }, send: 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) {evelfunction (_self.onloadStart, e); } this._xhr.upload.onload = function (e) {evenfunction (_self.onload, e); }; this._xhr.upload.onloadend = function (e) {evelfunction (_self.onloadend, e); } this._xhr.upload.onprogress = function (e) {evenfunction (_self.onprogress, e); }; this._xhr.upload.onerror = function (e) {evelfunction (_self.onerror, e); }; this._xhr.upload.ontimeout = function (e) {evelfunction (_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 (статус, данные); }}}}}, _createformdata: function () {var formData = new formData (); this._adddatatoformdata (formdata); this._addfiletoFormData (formData); вернуть FormData; }, _AddDatatOformData: function (formData) {if (this._data) {for (var inte in 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]); }}}}}; Просмотреть Codevar uploaderFactory = {send: function (url, data, files, callback) {var insuploader = new uploader (url, data, files); insuploader.callback = function (status, resdata) {if (typeOf callback === 'function') {callback (status, resdata); }} insuploader.send (); вернуть Insuploader; }};Объект загрузчика в основном просто инкапсулирует нативный API, предоставленный HTML5. uploaderFactory предоставляет простой интерфейс, который можно сделать, например, метод jQuery Ajax, вызовы загрузки файлов. Поддержка загрузки файлов, представленная в HTML5, заключается в расширении некоторых свойств и методов на основе исходного XMLHTTPRequest и предоставление объектов FormData для поддержки операций загрузки файлов.
Очередь загрузки файла (uploaderqueue.js) также является относительно важным объектом. Он включает в себя два объекта, один из них - очередь, объект очереди файла, который в основном отвечает за управление добавлением, удалением, изменением и запросом очередей файлов. Другим объектом является uploadEngine, двигатель загрузки файлов. Его функция в основном отвечает за получение объектов файлов из очереди файла, вызовом объекта uploader для загрузки файлов, а затем для обновления состояния файла в очереди файла. Очередь и uploadEngine - это единоличные объекты.
Во -первых, давайте посмотрим на объект очереди файла:
(function (upladerqueue) {var status = {ready: 0, загрузка: 1, полная: 2} var _self = null; var instance = null; function queue () {this._datas = []; this._cursize = 0; // current length_self = this;} queue.prototype = {add: function (data) {vare) {vare) {vare); Это (key) {var index = this._getindexbykey (Key); {var index = this._getIndexbykey (key); }} return -1; }, getDatabyIndex: function (index) {if (index <0) {return null; } вернуть 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 (ancess === null) {encos = new queue (); вернуть экземпляр; } else {return exaction; }} upladerqueue.queue = getInstance (); upladerqueue.uploadstatus = status;}) (window.uploaderqueue);В очереди файла загрузки используется массив для управления информацией каждого объекта файла. Каждый объект файла имеет три атрибута: ключ, данные и статус. Этот объект в основном отвечает за функции добавления, удаления, обновления и поиска объектов файлов.
Другим более важным объектом в очереди файлов загрузки является объект ingine загрузки (uploadengine.js)
(function (upladerqueue) {var instance = null; var _self; function uploadEngine () {this._url = null; this._curuploadingKey = -1; // флаги this.uploadStatusChanged = {}; this.UploadTempress = {}; _self = uploadengine. (url) {this._url = url; -1) { uploaderfactory.send (this._url, null, data.files, function (status, data) {_self._completeduploaditem.call (_self, status, data);}); _self.uploaditemprogress (_self._curuploadingKey, e); }}, _readyuploadItem: function (index) {this._curuploadingKey = upladerqueue.queue.getDatabyIndex (index) .key; if (typeof this.uploadstatuschanged === 'function') {this.uploadstatuschanged (this._curuploadingkey, upladerqueue.uploadstatus.uploading); } upladerqueue.queue.setIteMStatus (this._curuploadingKey, upladerqueue.uploadstatus.uploading); }, _completeduploaditem: function (status, data) {if (typeof this.uploadstatuschanged === 'function') {this.uploadstatuschanged (this._curuploadingkey, upladerqueue.uploadstatus.complete); } upladerqueue.queue.setIteMStatus (this._curuploadingKey, upladerqueue.uploadstatus.complete); this._startupload (); }}; function getInstace () {if (exance === null) {exance = new uploadEngine (); } return Encement; } upladerqueue.engine = getInstace ();}) (window.uploaderQueue);Этот объект относительно прост и в основном обеспечивает метод прогона и seturl, который используется для запуска двигателя загрузки и установки пути загрузки. Рекурсивный метод используется внутренне для загрузки всех методов в очередь файлов на сервер. Используйте uploaditemprogress, чтобы уведомить о ходе внешних загрузок, и используйте uploadstatuschanged, чтобы уведомлять статус загрузки файлов для обновления пользовательского интерфейса.
uploaderapp.js в основном включает в себя три объекта, один - простой объект jQuery (приложение $), аналогичный JQuery. В основном используется для связывающих событий. Одним из них является объект uploaderarea, который является областью окна, которая перетаскивается и загружается, а другой - объект входа, объект uploadermain. В основном он используется для инициализации объектов, предоставляя метод инициализации внешнюю часть для инициализации всего объекта.
Чтобы узнать о коде об объектах приложения $ и uploaderarea, пожалуйста, загрузите исходный код. Следующее приведено только краткое объяснение объекта uploadermain.
(function (app) {var _self; функция uploaderMain (id) {this._id = id; this._area = null; this.uploaders = []; this._url = 'file/uploader';} uploadermain.prototype = {init: function () {_self = this _intqueueeng: function () {uploaderqueue.engine.seturl (this._url); uploaderque. Math.round (Progress * 100); Key; }}}; app.main = uploadermain; }) (window.uploaderApp);Объект uploadermain эквивалентен посреднику между каждым объектом, главным образом для создания функции инициализации объекта и вызовов друг друга между объектами. Сделайте каждый объект сотрудничать друг с другом, чтобы завершить функции всего модуля. Предоставьте метод инициализации всей программы. На странице HTML просто нужен следующий код:
<script type = "text/javascript"> var main = new uploaderApp.main ('intainer'); main.init (); </script>Приведенный выше код должен создать объект входа, а затем использовать метод инициирования, чтобы запустить всю программу.
Вышеуказанное-простое объяснение основных методов фронтального JS. Если вы хотите узнать больше, пожалуйста, загрузите исходный код. Давайте посмотрим на основной код версионного реализации JS (Nodejs).
В основе Express мы уже сказали, что функция загрузки файла была полностью инкапсулирована в Express. При маршрутизации в действие файл был загружен только в случае загрузки файла во временный каталог. Мы можем настроить этот временный каталог в app.js. Метод конфигурации следующим образом:
app.use (express.bodyparser ({uploaddir: __ dirname+'/public/temp'}));Таким образом, после загрузки файла файл хранится в каталоге /public /temp, а имя файла также случайным образом получено с помощью Express через определенные алгоритмы. В действии мы пишем, нам нужно только переместить файлы во временном каталоге в каталог, где файлы хранятся на сервере, а затем удалить файлы во временном каталоге. Конкретный код заключается в следующем:
функция uploader (req, res) {if (req.files! = 'Undfened') {console.dir (req.files); utils.mkdir (). then (function (path) {uploadfile (req, res, path, 0);}); }} функция uploadfile (req, res, path, index) {var temppath = req.files.file [index] .path; var name = req.files.file [index] .name; if (temppath) {var rename = resport.denodeify (fs.rename); rename (temppath, path + name) .then (function () {var unlink = resperain.denodeify (fs.unlink); unlink (temppath);}). Тогда (function () {if (index == req.files.file.length - 1) {var res = {код: 1, des: 'upploadedly. uploadfile (req, res, path, index + 1); }}2. осознайте эффект
4. Получите код
Адрес загрузки кода: //www.vevb.com/jiaoben/202117.html