1. Prefácio
O upload de arquivo é uma função relativamente comum. O método tradicional de fazer upload é mais problemático. Você precisa clicar no botão Upload primeiro e, em seguida, encontrar o caminho para o arquivo e, em seguida, enviá -lo. Isso traz ótimos problemas para a experiência do usuário. O HTML5 começa a suportar arrastar e soltar a API necessária para o upload. O NodeJS também é uma tecnologia que se tornou cada vez mais popular recentemente. Esta também é a minha primeira vez para me envolver no NodeJS. No desenvolvimento do NodeJS, uma das estruturas de desenvolvimento mais usadas é o Excess, que é uma estrutura semelhante ao padrão MVC. Combinado com o HTML5 e o NodeJS Express, a função de arrastar e soltar upload é realizada.
2. Popularização do conhecimento básico
1. Conhecimento básico de nodejs
Para simplificar, o NodeJS é uma plataforma de desenvolvimento que permite que o JS seja executado no lado do servidor. O NodeJS está se desenvolvendo muito rápido, e muitas empresas domésticas também começaram a usá -lo, como o Taobao. As plataformas tradicionais de desenvolvimento de aplicativos da Web dependem de multi-thread para obter respostas de solicitação de alta concorrência. O NodeJS adota um modelo de design de IO assíncrono e de thread único e de design, que traz enormes melhorias de desempenho aos NodeJs. Esta também é a maior característica do NodeJS. No NodeJS, todas as operações de IO são realizadas através de retornos de chamada. Quando o NodeJS executar operações de IO, ele levará a solicitação de IO para uma fila de eventos, aguarde o programa para processá -lo e chamará a função de retorno de chamada para retornar o resultado.
Por exemplo, ao consultar o banco de dados, a operação é a seguinte:
mysql.query ("selecione * de myTable", function (res) {retorno de chamada (res);});No código acima, quando o NodeJS executar a instrução acima, ele não aguarda o banco de dados retornar o resultado, mas continuará a executar a seguinte instrução. Depois que o banco de dados obtém dados, ele será enviado para a fila de loop de eventos. A coisa do retorno de chamada será executada somente depois que o thread entrar na fila de loop de eventos.
Eu li mais sobre o NodeJS por dois dias e não sei muito. Para saber mais, você pode pesquisar na Internet.
Conhecimento sobre como começar com nodejs http://www.nodebeginner.org/index-zh-cn.html //www.vevb.com/article/48755.htm
2. Conhecimento básico de expresso
O NodeJS é uma comunidade de código aberto relativamente ativo, com um grande número de bibliotecas de desenvolvimento de terceiros, entre as quais o Express é uma das estruturas mais extensas e mais comumente usadas. É também a estrutura oficial recomendada pelo NodeJS. Além do encapsulamento de operações comuns de HTTP, ele também implementa controle de roteamento, suporte à resolução de modelos, tentativas dinâmicas, resposta do usuário etc., mas também não é uma estrutura onipotente. A maioria das funções é o encapsulamento do HTTP, é apenas uma estrutura leve. Muitas funções também precisam ser integradas em bibliotecas de terceiros e implementadas.
O Express fornece suporte para funções de upload muito convenientes. Após a solicitação de upload do arquivo, o Express receberá o arquivo e armazenará o arquivo em um diretório temporário. Então, no método de roteamento, precisamos apenas copiar o arquivo do diretório temporário para a pasta que queremos armazenar o upload do usuário. Na parte de upload do arquivo, a implementação do lado do servidor é baseada na função expressa.
3. HTML5 arrastar e carregar API
O HTML5 fornece muitos novos recursos, eventos de arrasto e upload de arquivos são um dos novos recursos. Devido ao espaço limitado, a implementação do código carregado de arrasto será destacado posteriormente. Não vou listar a API carregada de arrasto fornecida pelo html5 uma a uma. Se você estiver interessado, consulte: http://w3school.com.cn/html5/html5_ref_eventattributes.asp#mouse_events //www.vevb.com/html5/85977.html
3. Arraste e uplote para alcançar
1. Implementação de código
Vamos primeiro olhar para o diretório de arquivos do JS front-end:
em:
uploler.js implementa principalmente o encapsulamento da função de upload suportada pelo HTML5.
uPLOPERQUEUE.JS implementa principalmente o gerenciamento de carregamento de filas de arquivos e objetos de upload de arquivos, carregando arquivos na fila de arquivos para o servidor.
A entrada principal do UploadReApp.js File Upload, que implementa principalmente a janela Upload para ouvir eventos de arrasto e empurra os arquivos arrastados para a fila de arquivos de upload e inicia o programa de upload de arquivos.
A seguir, é uma explicação simples do código principal (necessário). Todos os códigos podem ser baixados aqui: FileUploader
Primeiro, basta encapsular o uploader.js para fazer upload de arquivos fornecidos pelo HTML5
upload da função (url, dados, arquivos) {this._files = arquivos; this._data = dados; this._url = url; this._xhr = null; this.onloadstart = {}; this.onloadend = {}; this.onProgress = {}; this.onerror = {}; this.ontimeout = {}; this.callback = {}; // retorno de chamada após a solicitação ser concluída_self = this; } uploader.prototype = {init: function () {if (! isValid ()) {tiro 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) {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 dados = _self._xhr.ProSeText; _self.callback (status, dados); }}}}}, _createFormData: function () {var formData = new FormData (); this._adddatatoFormData (formData); this._addfiletoFormData (formData); retornar formData; }, _adddatatoFormData: function (formData) {if (this._data) {for (var item neste._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 ('arquivo [' + i + ']', this._files [i]); }}}}}; Visualize codevar uPLOPERFACTORY = {send: function (url, dados, arquivos, retorno de chamada) {var insuploader = new uploader (url, dados, arquivos); insuploader.callback = function (status, resdata) {if (typeof callback === 'function') {retorno de chamada (status, resdata); }} insuploader.send (); retornar insuploader; }};O objeto de uploader simplesmente encapsula a API nativa fornecida pelo HTML5. O uploaderFactory fornece uma interface simples, que pode ser feita como o método Ajax da JQuery, chamadas de upload de arquivo. O suporte para o upload de arquivo fornecido no HTML5 é estender algumas propriedades e métodos com base no XMLHTTPREQUEST original e fornecer objetos FormData para suportar operações de upload de arquivos.
A fila de upload de arquivos (uploaderQueue.js) também é um objeto relativamente importante. Ele inclui dois objetos, um é o objeto de fila, fila de arquivos, que é principalmente responsável pelo gerenciamento da adição, exclusão, modificação e consulta de filas de arquivos. O outro objeto é o uploadEngine, um mecanismo de upload de arquivos. Sua função é principalmente responsável por retirar objetos de arquivo da fila de arquivos, chamando o objeto Uploader para fazer upload de arquivos e atualizar o status do arquivo na fila do arquivo. Fila e uploadEngine são objetos singleton.
Primeiro, vamos dar uma olhada no objeto da fila de arquivos:
(function (upladerqueue) {var status = {pronto: 0, upload: 1, complete: 2} var _self = null; var instance = null; function fileue () {this._dataS = []; this._cursize = 0; this.dats.push (key: {VAR Index = `` `` `Mais '' this._getIndexbyKey (chave); }} retornar -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; }} retornar -1; }}; function getInstace () {if (instance === null) {instance = new Queue (); instância de retorno; } else {retorna instância; }} upladerQueue.queue = getInstance (); upladerqueue.uploadstatus = status;}) (window.uploaderqueue);A fila de arquivo de upload usa uma matriz para gerenciar as informações de cada objeto de arquivo. Cada objeto de arquivo possui três atributos: chave, dados e status. Este objeto é principalmente responsável pelas funções de adicionar, excluir, atualizar e pesquisar objetos de arquivo.
Outro objeto mais importante na fila de arquivos de upload é o objeto de mecanismo de upload (uploadEngine.js)
(function (upladerqueue) {var instance = null; var _self; function uploadEngine () {this._url = null; this._curuploadingKey seturl: function (url) {this._url = url; if (index != -1) { this._uploadItem(index); } else { this._curUploadingKey = -1; return null; } }, _uploadItem: function (index) { var data = upladerQueue.Queue.getDataByIndex(index).data; _self = this; this._readyUploadItem(index); var upload = uploaderFactory.send (this._url, null, data.files, function (status, dados) {_self._completeduploaditem.call (_elf, status, dados);}); _self.UploadItemProgress (_self._curuploadingKey, e); }}, _readyUploadItem: function (index) {this._curupLoadingKey = upladerqueue.queue.getDatabyIndex (index) .Key; if (typeof this.upploadStatusChanged === 'function') {this.uploadstatuschanged (this._curuploadingKey, upladerqueue.uploadstatus.Uploading); } upladerQueue.queue.setItemstatus (this._curuploadingKey, upladerqueue.uploadstatus.Uploading); }, _CompleteDuploadItem: function (status, dados) {if (typeof this.uploadstatuschanged === 'function') {this.uploadstatuschanged (this._curuploadingKey, upladerqueue.UPLOADSTSTUS.COMPLETE); } upladerQueue.queue.setItemstatus (this._curuploadingKey, upladerqueue.uploadstatus.complete); this._startUpload (); }}; function getInstace () {if (instance === null) {instance = new uploadEngine (); } Instância de retorno; } upladerQueue.engine = getInstace ();}) (window.uploaderqueue);Este objeto é relativamente simples e fornece principalmente um método de execução e seturl, usado para iniciar o mecanismo de upload e configurar o caminho de upload. O método recursivo é usado internamente para fazer upload de todos os métodos na fila de arquivos no servidor. Use o uploadItemProgress para notificar o progresso dos uploads externos e use o uploadStatusChanged para notificar o status de upload do arquivo para atualizar a interface do usuário.
O UPLOPERAPP.JS inclui principalmente três objetos, um é um objeto jQuery simples (App $) semelhante ao jQuery. Usado principalmente para eventos de ligação. Um é o objeto UploadRarea, que é a área da janela que é arrastada e carregada, e o outro é o objeto de entrada, o objeto UployMain. É usado principalmente para inicializar objetos, fornecendo um método init para o exterior para inicializar o objeto inteiro.
Para saber sobre o código sobre os objetos App $ e UPLOPERARAEA, faça o download do código -fonte. A seguir, é apenas uma breve explicação do objeto UploadMain.
(function (app) {var _self; function uPLOPLEAIN (id) {this._id = id; this._area = null; this.upLoaders = []; this._url = 'file/uploader';} uploadermain.protype = {init: function () {_elf = this; _initqueueeng: function () {uploaderqueue.engine.seturl (this._url); uPLOURQUEUE.UPLOADSTATUS.COMPLETO) {_self._area.completeItem (key); Math.Round (Progresso *); chave; }}}; app.main = uPLOPLEAIN; }) (window.uploaderapp);O objeto UPLOPLEAIN é equivalente ao intermediário entre cada objeto, principalmente para fazer a função de inicialização do objeto e se chamar entre objetos. Faça com que cada objeto colabore entre si para concluir as funções de todo o módulo. Forneça um método init para inicializar o programa inteiro. Na página HTML, só preciso do seguinte código:
<script type = "text/javascript"> var main = new uPLOPERAPP.MAIN ('contêiner'); main.init (); </sCript>O código acima é criar um objeto de entrada e, em seguida, usar o método init para iniciar o programa inteiro.
O exposto acima é uma explicação simples dos principais métodos de JS front-end. Se você quiser saber mais, faça o download do código -fonte. Vamos dar uma olhada no código principal da implementação lateral de back -end JS (NodeJS).
No básico do Express, já dissemos que a função de upload de arquivos foi completamente encapsulada no Express. Ao rotear para a ação, o arquivo foi enviado apenas se o arquivo for carregado em um diretório temporário. Podemos configurar este diretório temporário no app.js. O método de configuração é o seguinte:
App.Use (Express.BodyParser ({UploadDir: __ Dirname+'/public/temp'}));Dessa forma, depois que o arquivo é enviado, o arquivo é armazenado no diretório /público /temp e o nome do arquivo também é obtido aleatoriamente pelo Express através de certos algoritmos. Na ação que escrevemos, precisamos apenas mover os arquivos no diretório temporário para o diretório em que os arquivos são armazenados no servidor e excluir os arquivos no diretório temporário. O código específico é o seguinte:
Uploader da função (req, res) {if (req.files! = 'indiferença') {console.dir (req.files); utils.mkdir (). Então (function (path) {uploadfile (req, res, path, 0);}); }} função uploadfile (req, res, path, index) {var temppath = req.files.file [index] .path; var name = req.files.file [index] .Name; if (temppath) {var rename = promey.denodeify (fs.rename); Renomear (temppath, caminho + nome) .then (function () {var unchink = promeso.denodeify (fs.unlink); desvincular (temppath);}). uploadfile (req, res, caminho, índice + 1); }}2. Perceba o efeito
4. Obtenha o código
Endereço para download de código: //www.vevb.com/jiaoben/202117.html