Um projeto de nó simples que implementa o upload de arrastar e soltar de vários arquivos pode ser baixado no Github. Você pode baixá -lo primeiro: https://github.com/johnharvy/uploadfiles/.
Desbloqueie o pacote de formato ZIP baixado. Recomenda -se usar o WebStom para executar o projeto e iniciar o projeto através do app.js. Se o aviso for que o ambiente de execução Node.exe não puder ser encontrado, especifique seu local de instalação Node.exe. A estrutura expressa que eu uso aqui é a versão 3.21.2.
Vamos apresentar brevemente como o efeito de arrastar e soltar é alcançado.
Vejamos o código primeiro:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <script src = "js/jquery.js"> </sCript> <script src = "js/eventUtil.js"> </sCript> <title> uploadfile </title> <yoy> #a1 {width: 100px; altura: 100px; fundo: #aaaaaa; text-align: centro; line-height: 100px; cor: rgba (81, 49, 202, 0,72); Auto;} </style> </head> <body> <div id = "a1"> arraste para este </div> <div id = "out-input"> </div> <cript> var a1 = document.getElementById ("a1"); function handleEvent (event) {var info = ",, output = =" document.getElementById ("Out-Input"), arquivos, i, len; eventUtil.preventDefault (Event); // Comportamento padrão de eventos de bloqueio var formData = new formData (); if (event.type == "gota") {files = event.datatransfer.files; i = 0; len = files.length; while (i <len) {info += files [i] .name +"(" +[i]. +"bytes) <br/>"; formData.append ("arquivo"+i, arquivos [i]); i ++;} output.innerhtml = info; $. Ajax ({type: "post", url: "/uploadfile", dados: formData, async: false, false: Falseppe, String por padrão para fazer upload de dados Sucesso: function (rs) {console.log (rs);}, erro: function (r) {alert ("um erro de upload de arquivo!");}});}} eventUtil.addhandler (a1, "dragover, handlevent); handlevent; "Drop", handleEvent); </script> </body> </html>O conteúdo HTML é muito simples, um exibe o intervalo de arrasto permitido e um é usado para exibir o conteúdo do arquivo carregado.
Parte do JS:
Aqui, preparei um objeto de interface do evento, que você também pode considerar como uma pequena biblioteca para lidar com eventos. Sua função é encapsular métodos diferentes para ligar os mesmos eventos em cada navegador. Para implementar os métodos de ligação de eventos comuns de cada navegador, ele é implementado uniformemente usando o objeto Eventutil. Você pode simplesmente olhar para o código de implementação, o que é muito simples.
Quando o navegador detecta três eventos de arrasto, "Drager", "Dragover" e "Drag", o comportamento padrão será bloqueado, e nossos eventos personalizados serão executados quando a situação "arrastar" for "arrastar".
Como carregamos um arquivo, usamos a instância do FormData aqui. Adicione um arquivo ao objeto através do Append () para se tornar um arquivo de fila. Depois de fazer o upload para o servidor, ele será analisado em objetos de atributo na ordem da fila. No caso, os arquivos armazenados no evento são recuperados através do "Event.datatransfer.files".
Outra coisa a observar aqui é que o método de jQuery Ajax precisa configurar o ProcessData para False ao fazer o upload de objetos de arquivo, o que significa não usar a operação de string de leitura padrão. O motivo é que, por padrão, se os dados passados através da opção de dados for um objeto (tecnicamente falando, desde que não for uma string), eles serão processados e convertidos em uma sequência de consulta para corresponder ao tipo de conteúdo padrão "Application/X-Www-Form-Form-Urlencoded". Se você deseja enviar informações da árvore Dom ou outras informações que você não deseja converter, precisará defini -las como falsas.
Após o upload do arquivo ser carregado com sucesso, o console imprimirá as informações "{Infor:" Success "}".
Neste ponto, a parte front-end termina. Vamos dar uma olhada no código no lado node.js.
A estrutura do arquivo é a seguinte:
Vamos primeiro olhar para o conteúdo na rota - App.js:
var exprest = requer ('expresso'); var rotas = requer ('./ rotas'); var user = requer ('./ rotas/usuário'); var http = requer ('http'); var path = requer ('path'); var app = express (); // all ambospp.set ('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 uploadAction = requer ("./ Action/FileUpload"); // Evento de roteamento de eventos UPLOINGACTIONATION.UPLOADTEST.UPLOADFILE (); // FILO Upload OnlyIf ('Development' == App.get ('Env') {App.use (Express.errorHandler ());} App.get ('Usuários user.list); http.createServer (app) .Listen (app.get ('porta'), function () {console.log ('servidor expresso de escuta na porta' + app.get ('porta'));});Existem várias diferenças em relação ao app.js. Exportei o objeto de aplicativo para reutilizá -lo no FileUpload.js e, em seguida, introduzi o módulo FileUpload.js e obtive o objeto Uploadtest que salva todos os métodos do módulo através deste objeto de interface e chamado de método uploadfile.
Ok, finalmente vamos olhar para o arquivo fileUpload.js:
var multipart = requer ('Connect-multiParty'); var app = requer ("../ app"); var path = requer ('caminho'); var fs = requer ("fs"); var app = app.App; var uploadTest = {}; function; functionFile () {App. null) {if (req.files ["arquivo"+i]) upload (i); else {i = null; Path.basename (req.files ["arquivo" + index] .path); // interface do caminho pode especificar o caminho e o nome do arquivo do arquivo. fs.creteReadstream (req.files ["arquivo"+index] .path) .pipe (fs.createwritestream (TargetPath));}});} uploadTest.uploadfile = uPLOPFILE; exportFile; exporttest = uploadTest;Os nodejs são sempre muito simples e poderosos e altamente criativos, e é por isso que eu gosto. Vemos que, na verdade, existem muito poucos códigos -chave aqui. Apresentarei brevemente o processo lógico de implementar o upload de arquivos:
• Obtenha o nome do arquivo do arquivo carregado
• Defina o local de armazenamento de arquivos e o nome do arquivo
• Leia o fluxo de conteúdo do arquivo e crie um novo arquivo para gravar o fluxo de conteúdo
Para fazer upload de vários arquivos, também fiz algumas operações correspondentes, que são muito intuitivas e não difíceis de entender.
Depois que o arquivo for enviado com sucesso, ele aparecerá no arquivo do uploadfiles sob o arquivo público.
Os módulos usados no arquivo são gravados no package.json. Eles podem ser instalados através do comando "NPM Install" inserindo o endereço do pacote.json o nível simultâneo. Se você executar os arquivos do projeto baixados diretamente no Github, não precisará mais instalá -los.
O acima é o método de implementação de combinar NodeJs e HTML5 para fazer upload de vários arquivos no servidor. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!