1. Prefacio
La carga de archivos es una función relativamente común. El método tradicional de carga es más problemático. Primero debe hacer clic en el botón de carga, luego encontrar la ruta del archivo y luego cargarla. Trae grandes problemas a la experiencia del usuario. HTML5 comienza a admitir arrastrar y soltar la API requerida para cargar. NodeJS también es una tecnología que se ha vuelto cada vez más popular recientemente. Esta es también mi primera vez para involucrarme en NodeJs. En el desarrollo de NodeJS, uno de los marcos de desarrollo más utilizados es la exposición, que es un marco similar al patrón MVC. Combinado con HTML5 y NodeJS Express, se realiza la función de la carga de arrastrar y soltar.
2. Popularización del conocimiento básico
1. Conocimiento básico de NodeJs
En pocas palabras, NodeJS es una plataforma de desarrollo que permite que JS se ejecute en el lado del servidor. NodeJS se está desarrollando muy rápido, y muchas empresas nacionales también han comenzado a usarlo, como Taobao. Las plataformas de desarrollo de aplicaciones web tradicionales se basan en múltiples subprocesos para lograr respuestas de solicitud de alta concurrencia. NodeJS adopta un modelo de diseño asíncrono y basado en eventos de un solo hilo, que trae grandes mejoras de rendimiento a NodeJs. Esta es también la característica más importante de NodeJS. En NodeJs, todas las operaciones de IO se llevan a cabo a través de devoluciones de llamada. Cuando NodeJs ejecuta operaciones IO, empujará la solicitud de IO a una cola de eventos, esperará a que el programa lo procese y luego llamará a la función de devolución de llamada para devolver el resultado.
Por ejemplo, al consultar la base de datos, la operación es la siguiente:
mysql.query ("select * de mytable", function (res) {callback (res);});En el código anterior, cuando NodeJS ejecuta la instrucción anterior, no esperará a que la base de datos devuelva el resultado, pero continuará ejecutando la siguiente declaración. Después de que la base de datos obtenga datos, se enviará a la cola de bucle de eventos. La cosa de devolución de llamada se ejecutará solo después de que el hilo ingrese a la cola de bucle de eventos.
He leído más sobre Nodejs durante dos días y no sé mucho. Para obtener más información, puede buscar en Internet.
Conocimiento sobre cómo comenzar con NodeJS http://www.nodebeginner.org/index-zh-cn.html //www.vevb.com/article/48755.htm
2. Conocimiento básico de Express
NodeJS es una comunidad de código abierto relativamente activa con una gran cantidad de bibliotecas de desarrollo de terceros, entre las cuales Express es uno de los marcos más extensos y más utilizados. También es el marco oficial recomendado por NodeJS. Además de la encapsulación de operaciones HTTP comunes, también implementa el control de enrutamiento, el soporte de resolución de plantillas, los intentos dinámicos, la respuesta del usuario, etc. pero tampoco es un marco omnipotente. La mayoría de las funciones son la encapsulación de HTTP, es solo un marco liviano. Muchas funciones también deben integrarse en bibliotecas de terceros e implementarse.
Exress proporciona soporte para funciones de carga muy convenientes. Después de la solicitud de carga de archivo, Express recibirá el archivo y almacenará el archivo en un directorio temporal. Luego, en el método de enrutamiento, solo necesitamos copiar el archivo del directorio temporal a la carpeta que queremos almacenar la carga del usuario. En la parte de carga de archivo, la implementación del lado del servidor se basa en la función expresa.
3. HTML5 arrastre y cargue API
HTML5 proporciona muchas características nuevas, los eventos de arrastre y la carga de archivos son una de las nuevas características. Debido al espacio limitado, la implementación del código cargado de arrastre se destacará más adelante. No enumeraré la API cargada de arrastre proporcionada por HTML5 uno por uno. Si está interesado, consulte: http://w3school.com.cn/html5/html5_ref_eventattributes.asp#mouse_events //www.vevb.com/html5/85977.html
3. Arrastre y suba para lograr
1. Implementación del código
Primero veamos el directorio de archivos del front-end JS:
en:
Suboader.js implementa principalmente la encapsulación de la función de carga admitida por HTML5.
uploaderqueue.js implementa principalmente la administración de cargar colas de archivos y objetos de carga de archivos, cargando archivos en la cola de archivos al servidor.
La entrada principal a la carga del archivo avoaderApp.js, que implementa principalmente la ventana de carga para escuchar los eventos de arrastrar y empuja los archivos arrastrados en la cola de archivo de carga e inicia el programa de carga de archivo.
La siguiente es una explicación simple del código central (necesario). Todos los códigos se pueden descargar aquí: FileUploader
Primero, simplemente encapsule omoader.js para cargar archivos proporcionados por HTML5
function uploader (url, datos, archivos) {this._files = archivos; this._data = data; this._url = url; this._xhr = null; this.onloadStart = {}; this.onloadend = {}; this.onProgress = {}; this.onerror = {}; this.onTimeOut = {}; this.callback = {}; // devolución de llamada después de completar la solicitud_self = this; } ujerer.prototype = {init: function () {if (! isValid ()) {throw e; } this._xhr = new xmlhttprequest (); this._bindevents (); }, enviar: 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 (_elf.OnloadStart, e); } this._xhr.upload.Onload = function (e) {evalfunction (_elf.onload, e); }; this._xhr.upload.onloadend = function (e) {evalfunction (_elf.onloadend, e); } this._xhr.upload.onProgress = function (e) {evalfunction (_Self.onProgress, e); }; this._xhr.upload.onerror = function (e) {evalfunction (_elf.onerror, e); }; this._xhr.upload.ontimeout = function (e) {evalfunction (_elf.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 (estado, datos); }}}}}, _createFormData: function () {var formData = new FormData (); this._adddatatoFormData (FormData); this._addfiletOformData (FormData); return formData; }, _adddatatoformData: function (formData) {if (this._data) {for (var item en 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]); }}}}}; Ver CodeVar uploaderFactory = {send: function (url, datos, archivos, devolución de llamada) {var insuploader = new uploader (url, datos, archivos); insuPloader.callback = function (status, resdata) {if (typeOf Callback === 'function') {callback (status, resdata); }} insuploader.send (); return insuploter; }};El objeto de cargador simplemente encapsula principalmente la API nativa proporcionada por HTML5. SobreLoaderFactory proporciona una interfaz simple, que se puede hacer como el método AJAX de JQuery, llamadas de carga de archivos. El soporte para la carga de archivos proporcionada en HTML5 es extender algunas propiedades y métodos basados en el XMLHTTPRequest original y proporcionar objetos FormData para admitir operaciones de carga de archivos.
La cola de carga de archivo (uploaderqueue.js) también es un objeto relativamente importante. Incluye dos objetos, uno es la cola, el objeto de cola de archivos, que es principalmente responsable de administrar la adición, eliminación, modificación y consulta de colas de archivos. El otro objeto es la carga de la carga, un motor de carga de archivos. Su función es principalmente responsable de eliminar los objetos de archivo de la cola de archivos, llamar al objeto cargador para cargar archivos y luego actualizar el estado del archivo en la cola de archivos. La cola y la carga de carga son objetos singleton.
Primero, echemos un vistazo al objeto de cola de archivo:
(function (upladerQueue) {var status = {Ready: 0, cargar: 1, completo: 2} var _Self = null; var instance = null; function queue () {this._datas = []; this._cursize = 0; // centre_self = this;} queue.prototype: function (data) {data). this._datas.push ({Key: Key, Data: Data, Status: Ready}); {VAR índice = this._getIndexByKey (Key); this._getIndexByKey (Key); }} return -1; }, getDatabyIndex: function (index) {if (index <0) {return null; } return this._datas [índice]; }, _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 (); instancia de retorno; } else {instancia de retorno; }} upladerqueue.queue = getInstance (); Upladerqueue.uploadStatus = status;}) (Window.uploaderqueue);La cola de archivo de carga utiliza una matriz para administrar la información de cada objeto de archivo. Cada objeto de archivo tiene tres atributos: clave, datos y estado. Este objeto es principal responsable de las funciones de agregar, eliminar, actualizar y buscar objetos de archivo.
Otro objeto más importante en la cola de archivo de carga es el objeto de motor de carga (uploadengine.js)
(function (upladerqueue) {var instance = null; var _Self; function uploadEngine () {this._url = null; this._curuploadingkey = -1; // flags this.uploadStatusChanged = {}; this.uploadeMprogress = {}; _Self = this;} uploadEnte. function (url) {this._url = url; ! = -1) {this._uploaditem (index); uploaderFactory.send (this._url, null, data.files, function (status, data) {_Self._Completeduploaditem.call (_self, status, data);}); _self.uploaditemProgress (_elf._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 (instance === null) {instance = new uploadEngine (); } instancia de retorno; } upladerqueue.engine = getInstace ();}) (Window.uploaderqueue);Este objeto es relativamente simple y proporciona principalmente un método de ejecución y seturl, que se utiliza para iniciar el motor de carga y establecer la ruta de carga. El método recursivo se usa internamente para cargar todos los métodos en la cola de archivos al servidor. Use uploaditemProgress para notificar el progreso de las cargas externas y use la carga de carga para notificar el estado de carga de archivos para actualizar la interfaz de usuario.
subaLoaderApp.js incluye principalmente tres objetos, uno es un objeto jQuery simple (aplicación $) similar a jQuery. Principalmente utilizado para eventos vinculantes. Uno es el objeto cargararea, que es el área de la ventana que se arrastra y se carga, y el otro es el objeto de entrada, el objeto cargar. Se usa principalmente para inicializar objetos, proporcionando un método de inicio al exterior para inicializar todo el objeto.
Para conocer el código sobre la aplicación $ y los objetos de carga de carga, descargue el código fuente. La siguiente es solo una breve explicación del objeto SuboLloadermin.
(function (app) {var _Self; function uploDermain (id) {this._id = id; this._area = null; this.uploaders = []; this._url = 'file/uploader';} uploadermain.prototype = {init: function () {_self = this; this._initarea (); this._initueEg () _initqueueeng: function () {uploaderqueue.engine.seturl (this._url); uploaderqueue.uploadstatus.complete) {_self._area.completeItem (key); * 100)); this._area.cancelitem = function (key) {uploaderqueue.queue.remove (clave); }}}; app.main = uploadermain; }) (Window.uploaderApp);El objeto cargueo es equivalente al intermediario entre cada objeto, principalmente para hacer la función de inicialización del objeto y llamarse entre sí entre los objetos. Haga que cada objeto colabore entre sí para completar las funciones de todo el módulo. Proporcione un método init para inicializar todo el programa. En la página HTML, solo necesite el siguiente código:
<script type = "text/javaScript"> var main = new uploaderApp.main ('Container'); main.init (); </script>El código anterior es crear un objeto de entrada y luego usar el método Init para iniciar todo el programa.
Lo anterior es una explicación simple de los métodos principales de JS front-end. Si desea saber más, descargue el código fuente. Echemos un vistazo al código principal de la implementación lateral de Backend JS (NodeJS).
En los conceptos básicos de Express, ya hemos dicho que la función de carga de archivos ha sido completamente encapsulada en Express. Al enrutar a la acción, el archivo se ha cargado solo si el archivo se carga en un directorio temporal. Podemos configurar este directorio temporal en App.js. El método de configuración es el siguiente:
app.use (express.bodyParser ({ifoteDir: __ dirname+'/public/temp'}));De esta manera, después de cargar el archivo, el archivo se almacena en el directorio /public /temp, y el nombre del archivo también se obtiene aleatoriamente por express a través de ciertos algoritmos. En la acción que escribimos, solo necesitamos mover los archivos en el directorio temporal al directorio donde los archivos se almacenan en el servidor y luego eliminar los archivos en el directorio temporal. El código específico es el siguiente:
function uploader (req, res) {if (req.files! = 'no loged') {console.dir (req.files); utils.mkdir (). entonces (function (ruta) {uploadFile (req, res, ruta, 0);}); }} function uploadFile (req, res, ruta, índice) {var temppath = req.files.file [index] .path; var name = req.files.file [index] .name; if (temppath) {var rename = promet.Denodeify (fs.Rename); rename (temppath, ruta + name) .then (function () {var no unk = promis.Denodeify (fs.unlink); Unlink (temppath);}). entonces (function () {if (index == req.files.file.length - 1) {var res = {código: 1, des: 'cargado de éxito'}; res.send (res);};};};};}; uploadfile (req, res, ruta, índice + 1); }}2. Date cuenta del efecto
4. Obtenga el código
Dirección de descarga del código: //www.vevb.com/jiaoben/202117.html