nodejs+express实现文件上传下载管理网站

nodejs+express-实现文件上传下载管理的网站

项目Github地址：https://github.com/qcer/updo

后端：基于nodejs的express的web框架.

前端：bootstrap框架+vuejs、jquery等js库

功能点：

  1. dronzone.js实现文件拖拽上传、下载，可自定义传输容量。
  2. vuejs实现表格双向数据绑定。
  3. jquery.form.min.js表单插件，升级表单，实现表单提交回调。
  4. 纯css+jQuery实现一键返回顶部。
  5. 简单的ajax异步刷新。

项目结构总览：

app/:典型的MVC架构，其下包含模型（models），视图（views），控制器（controller），不过此处没有用到models层，完全是试图与控制器进行数据的交互。前端页面用jade前端模板引擎编写，因为jade可以很好的支持页面的模块化，套用bootstrap前端框架。

config/:应用的配置目录，包括静态目录的配置，数据库的配置等，不多说。

freedom/:其下有两个字子目录（hidden/和upload/），其中hidden/目录存放文件上传后存放的目录位置。

node_modules/:项目依赖的nodejs第三方模块，不多说。

public/:存放静态文件的目录（css文件，js文件，图片）。

详细功能点描述:

1、左侧导航栏选中背景加深

这部分实现是简单粗暴，借助jQuery选择器遍历id为main-name下面的li标签当li标签的子标签a的href属性等于当前页面的href时，首先去除兄弟li标签的active类，再添加当前li标签的class为active。

在某些情况下，也可以通过给a标签绑定点击事件，当发生点击事件时，设置li标签的class为active，但是此时a标签中带有超链接，点击之后，固然可以将li标签的class的active，但是随即页面发生跳转，页面再次被刷新，效果消失。因此，通过jQuery改变页面效果仅当前页面有效，一旦页面刷新，便不再有效。

局部代码：

2、文件列表实现

后台:

通过fs模块的readdirSync同步函数读取freedom/upload/目录下的所有文件名，再根据文件名遍历文件每个文件的详细信息，此处调用fs模块的statSync同步函数。

局部代码：

重要的信息有累计毫秒数（valueOf()获取），文件名，文件大小，文件最近改变时间（ctime）。最后在调用Array.sort()根据累计毫秒数降序排序。注意sort此时需要传入自定义排序规则的回调函数。

前端：

前端列表以jade模板引擎和vuejs相结合，v-for指令遍历从后端发送过来的列表数据列表，由于vuejs天生支持MVVC模式，视图与数据模型的双向数据绑定变得自然而然。删除分别通过v-on指令绑定两个点击事件。

前端列表局部代码：

vue实例代码:

其中fileDelete()f方法通过post的方式发送数据到后端，后端响应最新的文件列表数据回来，进而更新model层的数据，由于model层数据与视图通过view-model层联系实现绑定，文件列表内容的改变会直接反映到网页上，实现局部更新的效果。准确的讲，这里虽然实现了双向绑定，实际上只用到了model向view方向的单项绑定。

fileDownload()方法则直接一文件名作为一个参数，拼接一个url，重定到该url，后端更具该url调用下载方法即可。

删除和下载的后台代码：

3、文件拖拽上传

前端：

实现文件拖拽的效果借助于一个前端插件dronzone.js实现，从前端层面看来，本质上与表单上传并无差异，都可以通过psot方法发送数据。

绑定一个上传成功后的回调函数，函数中通过post想后台请求最新的文件列表数据，更新vue实例的data属性，view层通过数据绑定实现数据局部更新效果。

后端：

后端通过psot方法接受数据，并通过multiparty第三方模块接解析数据，将前端发送过里的文件以一个随即字符串作为文件名存放在freedom/upload/目录下，在调用fs的renameSync方法更改为正确的文件名，最后记得调用res.end()结束传输连接，否则前端页面一直处于等待状态。

4、白板复制粘贴的功能

前端：

直接在表单中嵌入一个textarea标签，给按钮绑定点击事件实现提交，通过post方法向后端发送文本数据，提交成功后通过Jquery实现局部异步刷新提交的内容，显示在页面上。此处抛弃form默认的提交功能，因为默认的提交动作不能实现提交回调操作，自定义带有异步回调的submit动作。

局部代码：

异步回调的submit有多重实现方式

方式一：通过jquery.form.min.js插件实现

方式二：DIY实现

但是此处有点不好地方在与，js代码与html代码存在耦合，通过vuejs来重构可以实现两者的解耦。

提交后台代码：

同时为了动态增加textarea空间的功能，增加一个按钮，并绑定点击事件，通过jQuery实现。

5、一键返回顶部功能

存css实现+jquery实现，

通过Jquery改变css属性，控制器是否显示，鼠标滑过时的背景颜色变化，以及点击时返回顶部的动作。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • NodeJS使用formidable实现文件上传

    最近自学了一下NodeJS,然后做了一个小demo,实现歌曲的添加.修改.播放和删除的功能,其中自然要实现音乐和图片的上传功能.于是上网查找资料,找到了一个formidable插件,该插件可以很好的实现文件的上传功能.该小demo用到了MySQL数据库,所有的数据都存放到了数据库中.下面简单说一些如何使用. 1.创建app.js主文件 const express = require('express'); const router = require('./router'); const pat

  • Node.js模拟浏览器文件上传示例

    OSChina上发过了,那个也是我的,现在放到这来,哈哈 这段代码只能一次上传一个文件~~ 复制代码 代码如下: var path=require("path"); var fs=require("fs"); var http=require("http"); //post值payload var getfield=function(field, value) { return 'Content-Disposition: form-data; n

  • Node.js实现文件上传

    在工作中碰到了这样的需求,需要用nodejs 来上传文件,之前也只是知道怎么通过浏览器来上传文件, 用nodejs的话, 相当于模拟浏览器的行为. google 了一番之后, 明白了浏览器无非就是利用http协议来给服务器传输数据, 具体协议就是<RFC 1867 - Form-based File Upload in HTML>, 在浏览器上通过form 表单来上传文件就是通过这个协议,我们可以先看看浏览器给服务端发送了什么数据, 就可以依葫芦画瓢的把上传功能实现出来.说起form 表单上传

  • Nodejs实现文件上传的示例代码

    笔者用nodejs做项目时需要用到文件上传的功能,在网上搜索了很多教程,找到了一个express的中间件,用于处理 multipart/form-data 类型的表单数据,可以很方便的将表单中的文件数据保存到服务器. 介绍 简单的用法 定义存储器 Multer作为express的一个中间件,我们可以很方便的自定义上传的文件目录以及保存的文件名.先看一个最简单的用法, demo1地址 : var express = require('express'); var multer = require(

  • node文件上传功能简易实现代码

    找了不少文件上传的相关模块,最后选择了比较常用,并且是express推荐使用的 multer 来实现文件上传,附上 GitHub地址 1. 开始 开始第一步,自然就是安装模块,不多说 npm install multer --save 这里简单说一下,因为文件上传是用 post 方法提交数据,所以上传的单文件或者多文件会作为一个 body 体添加到请求对象中,我们可以通过 req.file 或者 req.files 查看上传后文件的相关信息. 以单文件上传为例,req.file 返回一个对象:

  • 在Node.js中使用HTTP上传文件的方法

    在Node.js中使用HTTP上传文件的方法

    开发环境 我们将使用 Visual Studio Express 2013 for Web 作为开发环境, 不过它还不能被用来做 Node.js 开发.为此我们需要安装 Node.js Tools for Visual Studio.  装好后 Visual Studio Express 2013 for Web 就会转变成一个 Node.js IDE 环境,提供创建这个应用所需要的所有东西..而基于这里提供的指导,我们需要: 下载安装 Node.js  Windows 版,选择适用你系统平台的

  • Node.js实现兼容IE789的文件上传进度条

    Nodejs对文件上传的处理 在Express4里req.files已经是undefined了:现在用的最多的可能就是formidable了,你知道了它有个progress事件,于是心中大喜,低版本IE的进度条有戏了:OK,试一下: form .on('error',function(err){ console.log(err); }) .on('aborted',function(){ console.log('aborted'); }) .on('progress',function(byt

  • node.js文件上传处理示例

    直入主题,在Node.js web 开发基本框架的前提下,我们来做一个文件上传功能 上传的handler比较简单,网上都能找到 var url=require('url'); var exec=require('child_process').exec; var querystring=require('querystring'); /********************************文件上传 第3方模块测试*************************/ function f

  • nodejs+express实现文件上传下载管理网站

    nodejs+express实现文件上传下载管理网站

    nodejs+express-实现文件上传下载管理的网站 项目Github地址:https://github.com/qcer/updo 后端:基于nodejs的express的web框架. 前端:bootstrap框架+vuejs.jquery等js库 功能点: dronzone.js实现文件拖拽上传.下载,可自定义传输容量. vuejs实现表格双向数据绑定. jquery.form.min.js表单插件,升级表单,实现表单提交回调. 纯css+jQuery实现一键返回顶部. 简单的ajax异

  • nodejs基于express实现文件上传的方法

    本文实例讲述了nodejs基于express实现文件上传的方法.分享给大家供大家参考,具体如下: 前段时间在做个人项目的时候,用到了nodejs服务端上传文件,现在回头把这个小结一下,作为记录. 本人上传文件时是基于express的multiparty ,当然也可以使用connect-multiparty中间件实现,但官方似乎不推荐使用connect-multiparty中间件.废话不多说,下面看代码吧. 步骤: (1)使用express创建项目,默认使用的是jade模板引擎,但是还是习惯于ht

  • nodejs multer实现文件上传与下载

    本文实例为大家分享了nodejs实现文件上传下载的具体代码,供大家参考,具体内容如下 1.介绍 做了一个关于文件上传和下载的demo ,选择了Multer 作为中间件进行数据处理. 关于multer请参考中文翻译文档 https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md 或者官方文档 2. upload 文件上传 html form标签内设置enctype="multipart/form-data"是必须

  • AngularJS+Bootstrap实现多文件上传与管理

    AngularJS+Bootstrap实现多文件上传与管理

    最近一个项目中需要实现多文件上传与管理,而项目是基于bootstrap开发的,所以查了一些bootstrap文件上传插件,最后发现还是bootstrap-fileinput最美观,该插件可以实现多文件的上传与管理(插件官方地址:http://plugins.krajee.com/file-input),具体的效果如下: (bootstrap-fileinput不局限于图片上传,也可以实现文件上传,但图片的缩略图容易辨识,这里就以图片上传为例) 该插件基本的操作可以参考:JS文件上传神器boots

  • Java实现FTP批量大文件上传下载篇1

    Java实现FTP批量大文件上传下载篇1

    本文介绍了在Java中,如何使用Java现有的可用的库来编写FTP客户端代码,并开发成Applet控件,做成基于Web的批量.大文件的上传下载控件.文章在比较了一系列FTP客户库的基础上,就其中一个比较通用且功能较强的j-ftp类库,对一些比较常见的功能如进度条.断点续传.内外网的映射.在Applet中回调JavaScript函数等问题进行详细的阐述及代码实现,希望通过此文起到一个抛砖引玉的作用. 一.引子 笔者在实施一个项目过程中出现了一种基于Web的文件上传下载需求.在全省(或全国)各地的用

  • Java语言实现简单FTP软件 FTP上传下载管理模块实现(11)

    Java语言实现简单FTP软件 FTP上传下载管理模块实现(11)

    本文为大家分享了FTP上传下载管理模块的实现方法,供大家参考,具体内容如下 1.上传本地文件或文件夹到远程FTP服务器端的功能. 当用户在本地文件列表中选择想要上传的文件后,点击上传按钮,将本机上指定的文件上传到FTP服务器当前展现的目录,下图为上传子模块流程图 选择好要上传的文件或文件夹,点击"上传"按钮,会触发com.oyp.ftp.panel.local.UploadAction类的actionPerformed(ActionEvent e)方法,其主要代码如下 /** * 上传

  • SpringBoot集成SFTP客户端实现文件上传下载实例

    目录 背景 依赖 创建工具类 SFTP链接池化 SFTP链接池的使用 集成到SpringBoot中 配置 java Bean注入 背景 在项目开发中,一般文件存储很少再使用SFTP服务,但是也不排除合作伙伴使用SFTP来存储项目中的文件或者通过SFTP来实现文件数据的交互. 我遇到的项目中,就有银行和保险公司等合作伙伴通过SFTP服务来实现与我们项目的文件数据的交互. 为了能够顺利地完成与友商的SFTP服务的连通,我们需要在自己的项目中实现一套SFTP客户端工具.一般我们会采用Jsch来实现SF

  • java中struts2实现文件上传下载功能实例解析

    本文实例讲述了java中struts2实现文件上传下载功能实现方法.分享给大家供大家参考.具体分析如下: 1.文件上传 首先是jsp页面的代码 在jsp页面中定义一个上传标签 复制代码 代码如下: <tr>      <td align="right" bgcolor="#F5F8F9"><b>附件:</b></td>      <td bgcolor="#FFFFFF">

  • 详解ftp文件上传下载命令

    详解ftp文件上传下载命令

    介绍:从本地以用户wasqry登录的机器1*.1**.21.67上通过ftp远程登录到ftp服务器上,登录用户名是lte****,以下为使用该连接做的实验. 查看远程ftp服务器上用户lte****相应目录下的文件所使用的命令为:ls,登录到ftp后在ftp命令提示符下查看本地机器用户wasqry相应目录下文件的命令是:!ls.查询ftp命令可在提示符下输入:?,然后回车.   1.从远程ftp服务器下载文件的命令格式: get  远程ftp服务器上当前目录下要下载的文件名  [下载到本地机器上

  • Java中实现文件上传下载的三种解决方案(推荐)

    java文件上传与文件下载是程序开发中比较常见的功能,下面通过本文给大家介绍Java中实现文件上传下载的三种解决方案,具体详情如下所示: 第一点:Java代码实现文件上传 FormFile file=manform.getFile(); String newfileName = null; String newpathname=null; String fileAddre="/numUp"; try { InputStream stream = file.getInputStream(

随机推荐