Простой проект узла, который реализует многопрофильную загрузку перетаскивания, можно загрузить на GitHub. Сначала вы можете скачать его: https://github.com/johnharvy/uploadfiles/.
Разблокируйте загруженный пакет формата Zip. Рекомендуется использовать Webstom для запуска проекта и запустить проект через App.js. Если подсказка состоит в том, что среда выполнения Node.exe не может быть найдена, укажите место установки Node.exe. Express Framework, которую я использую здесь, - версия 3.21.2.
Давайте кратко представим, как достигнут эффект перетаскивания.
Сначала посмотрим на код:
<! 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 {ширина: 100px; высота: 100px; фон: #aaaaaaa; text-align: center; line-hight: 15px; цвет: Rgba (81, 49, 202, 0.72); auto;} </style> </head> <body> <div id = "a1"> перетаскивать в этот </div> <div id = "Out-input"> </div> <script> var a1 = document.getelementbyid ("a1"); document.getElementById ("Out-Input"), Files, I, Len; EventUtil.preventDefault (Event); // Поведение по умолчанию блокировки событий var formData = new formData (); if (event.type == "drop") {files = event.datatransfer.files; i = 0; len = файлы. +"Bytes) <br/>";; formData.Append ("file"+i, files [i]); i ++;} output.innerhtml = info; $. ajax ({type: "post", url: "/oploadfile", data: formData, async: falsepe wy forsifice: falsepiz Строка по умолчанию для загрузки данных успеха: function (rs) {console.log (rs);}, ошибка: function (r) {alert («ошибка загрузки файла!»);}});}} eventutil.addhandler (a1, «dragover», handleevent); eventutil.addhandler (a1, «dropevent); «Drop», Handleevent); </script> </body> </html>Контент HTML очень прост, один отображает допустимый диапазон перетаскивания, и один используется для отображения содержимого загруженного файла.
JS Часть:
Здесь я подготовил объект интерфейса EventUtil, который вы также можете рассматривать как небольшую библиотеку для обработки событий. Его функция состоит в том, чтобы инкапсулировать различные методы связывания одних и тех же событий в каждом браузере. Чтобы реализовать общие методы связывания событий каждого браузера, он равномерно реализован с использованием объекта EventUtil. Вы можете просто посмотреть на его код реализации, что очень просто.
Когда браузер обнаружит три события перетаскивания, «драйер», «драгвер» и «перетаскивание», поведение по умолчанию будет заблокировано, и наши индивидуальные события будут выполнены, когда ситуация «перетаскивание» будет «перетаскивание».
Поскольку мы загружаем файл, мы используем экземпляр FormData здесь. Добавьте файл в объект через Append (), чтобы стать файлом очереди. После загрузки на сервер он будет проанализирован в объекты атрибутов в порядке очереди. В случае, файлы, хранящиеся в мероприятии, извлечены через «event.datatransfer.files».
Еще одна вещь, которую следует отметить, заключается в том, что метод jQuery Ajax должен настроить ProcessData на false при загрузке объектов файла, что означает, что не использует операцию по умолчанию строки считывания. Причина в том, что по умолчанию, если данные, передаваемые через опцию данных, являются объектом (технически говоря, если они не являются строкой), они будут обработаны и преобразованы в строку запроса в соответствии с типом содержимого по умолчанию «Приложение/XWW-Form-Urlencoded». Если вы хотите отправить информацию о дереве DOM или другую информацию, которую вы не хотите конвертировать, вам нужно установить ее в False.
После того, как загрузка файла успешно загружена, консоль печатает информацию «{Infor:« успех »}».
На этом этапе передняя часть заканчивается. Давайте посмотрим на код на стороне node.js.
Структура файла выглядит следующим образом:
Давайте сначала посмотрим на контент в маршруте - app.js:
var Express = require ('express'); var Routes = require ('./ routs'); var user = require ('./ routs/user'); var http = require ('http'); var path = require ('path'); var app = express (); // urvidentapsp.set ('порт', process.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 = require ("./ action/fileupload"); // маршрутизация события прослушивания ulloadAction.uploadTest.uploadFile (); // Загрузка файла загрузка только ('development' == app.get ('env')) {app.use (express.errorhandler ());} app.get ('/users', user.list); http.createserver (app) .listen (app.get ('port'), function () {console.log ('Express Sulding On Port' + app.get ('port'));});Есть несколько отличий от первоначального приложения.js. Я экспортировал объект приложения для повторного использования его в файлах -плате.
Хорошо, наконец, давайте посмотрим на файл fileupload.js:
var multipart = require ('connect-multiparty'); var app = require ("../ app"); var path = require ('path'); var fs = require ("fs"); var app = app.app; var uploadtest = {}; function uploadfile () {app.post ("/uploadfile", multipart (), function (rev q) {var/vas (i; null) {if (req.files ["file"+i]) upload (i); else {i = null; path.basename (req.files ["file" + index] .path); // Интерфейс пути может указать путь и имя файла файла. fs.createreadStream (req.files ["file"+index] .path) .pipe (fs.createwritestream (targetPath));}});} uploadTest.UploadFile = uploadFile; exports.uploadTest = uploadTest;Nodejs всегда очень просты и мощны, и очень креативны, поэтому мне это нравится. Мы видим, что здесь на самом деле очень мало кодов ключей. Я кратко представлю логический процесс реализации загрузки файлов:
• Получить имя файла загруженного файла
• Установите местоположение хранилища файла и имя файла
• Прочитайте поток контента файла и создайте новый файл для записи потока контента
Чтобы загрузить несколько файлов, я также выполнил некоторые соответствующие операции, которые очень интуитивно понятны и не сложно понять.
После того, как файл будет успешно загружен, он будет отображаться в файле uploadfiles под открытым файлом.
Модули, используемые в файле, записываются в package.json. Они могут быть установлены через команду «Установка NPM», введя адрес каталога Package.json одновременного уровня. Если вы запускаете файлы проекта, загруженные напрямую на GitHub, вам больше не нужно их устанавливать.
Выше приведено метод реализации комбинирования NodeJS и HTML5 для загрузки нескольких файлов на сервер. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!