Se puede descargar un proyecto de nodo simple que implementa la carga de arrastrar y soltar múltiples archivos en GitHub. Puede descargarlo primero: https://github.com/johnharvy/uploadfiles/.
Desbloquee el paquete de formato ZIP descargado. Se recomienda usar WebStom para ejecutar el proyecto e iniciar el proyecto a través de App.js. Si el mensaje es que no se puede encontrar el entorno de ejecución de node.exe, especifique su ubicación de instalación de nodo.exe. El marco expreso que uso aquí es la versión 3.21.2.
Presentemos brevemente cómo se logra el efecto de arrastre y caída.
Veamos primero el código:
<!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><style>#a1{width:100px;height:100px;background: #aaaaaaa; text-align: Center; Line-Height: 100px; Color: RGBA (81, 49, 202, 0.72); Margen: 150px Auto;} </style> </head> <body> <Div Id = "A1"> Arrastre a esto </div> <d Id = "Output"> </iv> <scritch> Var a1 = document.getElementById ("a1"); function handleEvent (event) {var info = "", outport = document.getElementById ("Out-Input"), archivos, i, len; eventUtil.preventDefault (evento); // Comportamiento predeterminado de eventos de bloqueo var formdata = new FormData (); if (event.type == "drop") {files = event.datatransfer.files; i = 0; len = files.length; while (i <len) {info += files [i] .niM +"bytes) <br/>"; formdata.append ("file"+i, archivos [i]); i ++;} output.innerhtml = info; $. Ajax ({{type: "post", url: "/uploadFile", data: formdata, async: falso, falso: contenido de contenido: falso, falso, processdata, // aquí, lo que le dice no. for uploading data success:function(rs){console.log(rs);},error:function(r){alert("A file upload error!");}});}}EventUtil.addHandler(a1, "dragover", handleEvent);EventUtil.addHandler(a1, "drop", handleEvent);EventUtil.addHandler(a1, "drop", HandleEvent); </script> </body> </html>El contenido HTML es muy simple, uno muestra el rango de arrastre permitido y uno se usa para mostrar el contenido del archivo cargado.
JS PARTE:
Aquí he preparado un objeto de interfaz EventUtil, que también puede considerar como una pequeña biblioteca para manejar eventos. Su función es encapsular diferentes métodos para unir los mismos eventos en cada navegador. Para implementar los métodos de enlace de eventos comunes de cada navegador, se implementa uniformemente utilizando el objeto EventUtil. Simplemente puede mirar su código de implementación, lo cual es muy simple.
Cuando el navegador detecte tres eventos de arrastre, "Drager", "Dragover" y el comportamiento predeterminado de "arrastrar" se bloquearán, y nuestros eventos personalizados se ejecutarán cuando la situación de "arrastre" sea "arrastre".
Debido a que cargamos un archivo, usamos la instancia de FormData aquí. Agregue un archivo al objeto a través de append () para convertirse en un archivo de cola. Después de subir al servidor, se analizará en objetos de atributo en el orden de la cola. En el caso, los archivos almacenados en el evento se recuperan a través de "Event.datatransfer.files".
Otra cosa a tener en cuenta aquí es que el método AJAX de jQuery necesita configurar ProcessData en falso al cargar objetos de archivo, lo que significa no usar la operación de cadena de lectura predeterminada. La razón es que de manera predeterminada, si los datos pasados a través de la opción de datos son un objeto (técnicamente hablando, siempre que no sea una cadena), se procesará y se convertirá en una cadena de consulta para que coincida con el tipo de contenido predeterminado "Aplicación/X-WWW-Form-URLENCODEDED". Si desea enviar información de DOM Tree u otra información que no desea convertir, debe configurarla en False.
Una vez que la carga de archivo se carga correctamente, la consola imprimirá la información "Infor:" Success "}".
En este punto, la parte front-end termina. Echemos un vistazo al código en el lado nodo.js.
La estructura del archivo es la siguiente:
Primero veamos el contenido en la ruta - App.js:
var express = request ('express'); var rutas = request ('./ Routes'); var user = request ('./ rutas/user'); var http = require ('http'); var ruta = require ('rath'); var app = express (); // todos los entornosapp.set ('port', process.env.port || 3000); app.set ('view Engine', '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; var; uploadAction = require ("./ Action/FileUpload"); // Evento de enrutamiento Evitar escucha uploadAction.uploadtest.uploadFile (); // File upload uploadInlyIf ('desarrollo' == app.get ('env')) {app.use (express.errorHandler ());} app.get ('/usuarios',, Úsel user.list); http.createServer (app) .listen (app.get ('puerto'), function () {console.log ('Express Server Listen en Port' + App.get ('Port'));});Hay varias diferencias con respecto a la aplicación inicial.js. Exporté el objeto de la aplicación para reutilizarlo en fileUpload.js, y luego introduje el módulo FileUpload.js, y obtuve el objeto SubloadTest que guarda todos los métodos del módulo a través de este objeto de interfaz y llamó el método de carga.
OK, finalmente veamos el archivo fileupload.js:
var multipart = request ('Connect-Multiparty'); var app = require ("../ app"); var pATH = require ('path'); var fs = require ("fs"); var app = app.app; var {}; function uploadFile () {app.post ("/uploadFile", multipart (), function (req, res) {var i = 0; null) {if (req.files ["file"+i]) cargar (i); else {i = nulo; Path.Basename (req.files ["archivo" + index] .path); // La interfaz de la ruta puede especificar la ruta y el nombre del archivo del archivo. fs.CreateReadStream (req.files ["archivo"+index] .path) .pipe (fs.CreatewriteStream (TargetPath));}});} uploadTest.uploadFile = uploadFile; exports.uploadtest = uploadTest;Los NodeJ siempre son muy simples y poderosos, y muy creativos, por eso me gusta. Vemos que en realidad hay muy pocos códigos clave aquí. Introduciré brevemente el proceso lógico de implementación de la carga de archivos:
• Obtenga el nombre del archivo del archivo cargado
• Establezca la ubicación de almacenamiento de archivos y el nombre del archivo
• Lea la transmisión de contenido del archivo y cree un nuevo archivo para escribir la transmisión de contenido
Para cargar múltiples archivos, también hice algunas operaciones coincidentes, que son muy intuitivas y no son difíciles de entender.
Una vez que el archivo se cargue correctamente, aparecerá en el archivo de files de carga en el archivo público.
Los módulos utilizados en el archivo se registran en paquete.json. Se pueden instalar a través del comando "instalación de NPM" ingresando la dirección de directorio de el nivel simultáneo de paquete.json. Si ejecuta los archivos del proyecto descargados en GitHub directamente, ya no necesita instalarlos.
Lo anterior es el método de implementación para combinar NodeJS y HTML5 para cargar múltiples archivos en el servidor. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!