位置: 编程技术 - 正文

Nodejs+express+html5 实现拖拽上传

编辑:rootadmin

推荐整理分享Nodejs+express+html5 实现拖拽上传,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

一、前言

文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传。给用户体验带来很大问题。html5开始支持拖拽上传的需要的api。nodejs也是一个最近越来越流行的技术,这也是自己第一次接触nodejs,在nodejs开发中,最常用的开发框架之一是expess,它是一个类似mvc模式的框架。结合html5、nodejs express实现了拖拽上传的功能。

二、基础知识普及

1、NodeJs基础知识

nodejs简单来说就是一个可以让js在服务端也能运行的开发平台,nodejs发展非常很快,很多国内公司也已经开始使用比如淘宝等。传统的web应用程序开发平台依靠多线程来实现高并发请求的响应。而nodejs采用了单线程、异步式IO、事件驱动的设计模型,给nodejs带来了巨大的性能提升。这也是nodejs最大的特点,在nodejs中,所有的IO操作都是通过回调的方式进行,nodejs在执行IO操作时会把IO请求推送一个事件队列,等待程序进行处理,等处理完IO,然后调用回调函数返回结果。

比如在查询数据库操作如下:

在以上代码中,nodejs在执行以上语句时,不会等待数据库返回结果,而是继续执行后面的语句。在数据库获取到数据后,会发送到事件循环队列中,等到线程进入事件循环队列后,才执行callback的东西。

关于nodejs更多的知识,我也知识看了两天,了解不多。了解更多的知识可以在网络上搜索。

nodejs入门的知识 nodejs是一个比较活跃的开源社区,它拥有大量的第三方开发库,其中Express是其中最广泛的、最常用的框架之一。也是nodejs官方推荐的框架。它除了对常见http操作的封装,还实现了路由控制、模版解析支持、动态试图、用户回话等等。但它也不是一个万能的框架,绝大多数功能是对http的封装,它只是一个轻量级的框架。很多功能还需要集成第三方库还实现。

exress提供了非常方便的上传功能的支持,在文件上传请求以后,express会接收文件并把文件存在一个临时目录,然后在路由到的方法中,我们只需把文件从临时目录下拷贝到我们要存放用户上传文件夹即可。在文件上传部分,服务器端的实现就是基于express这个功能来实现的。

3、html5拖曳上传api

html5提供很多新的特性,拖拽事件以及文件上传就是新特性之一。由于篇幅有限,后面重点介绍拖曳上传的代码实现。就不一一列出html5提供的拖曳上传的apil了,感兴趣的可以参考: FileUploader

首先对html5提供的文件上传做简单的封装uploader.js

uploader对象主要是对html5提供的原生api进行简单的封装。uploaderFactory提供一个简单的接口,使用它可以像jquery的ajax方法一样完成,文件上传调用。html5中提供的文件上传的支持,是在原来XMLHttpRequest基础之上扩展一些属性和方法,提供了FormData对象,来支持文件上传操作。

Nodejs+express+html5 实现拖拽上传

文件上传队列(uploaderQueue.js)也是一个比较重要的对象,它包括两个对象一个是Queue,文件队列对象,主要负责管理文件队列的增删改查询等操作,另一个对象是UploadEngine,文件上传引擎,它的功能主要是负责从文件队列中取出文件对象,调用uploader对象上传文件,然后更新文件队列中的文件状态。Queue以及UploadEngine都是单例对象。

首先来看下文件队列对象:

上传文件队列使用一个数组管理每个文件对象信息,每个文件对象有key,data,status三个属性,该对象主要负责文件对象的增加、删除、更新、查找的功能。

上传文件队列中另一个比较重要的对象是上传引擎对象(uploadEngine.js)

该对象比较简单主要提供一个run以及setUrl方法,用于启动上传引擎,以及设置上传路径的功能。内部使用递归的方法把文件队列中的方法全部上传到服务端。使用uploadItemProgress通知外部上传的进度,使用uploadStatusChanged通知文件上传状态,以便更新UI.

uploaderApp.js中主要包括三个对象,一个是类似jquery的一个简单的jquery对象(App$)。主要用于绑定事件。一个是uploaderArea对象,是拖曳上传的窗口区域,另一个是入口对象uploaderMain对象。主要用于初始化对象,对外部提供一个init方法,来初始化整个对象。

了解关于App$以及uploaderArea对象的代码请下载 源代码 ,下面仅对uploaderMain对象做简单的说明。

在uploaderMain对象,相当于各个对象之间的中介,主要就是做对象的初始化功能、以及对象之间相互调用。使各个对象之间相互协作完成整个模块的功能。对外提供一个init方法来初始化整个程序,在html页面中只需如下代码:

以上代码就是创建一个入口对象,然后使用init方法来启动整个程序。

以上是对前端js的主要方法做的简单解释,如果想详细了解请下载源代码。下面简单看下后端js(nodejs)端实现的主要代码。

在express基础知识时,已经讲过在express已经对文件上传功能做了完整的封装,当路由到action时,文件已经完成上传只是文件上传到了一个临时目录,这个临时目录我们可以在app.js中配置的,配置方式如下:

这样在文件上传后文件就存放在/public/temp目录下,文件名也是express通过一定的算法随机获取的。在我们写的action中只需要把存在临时目录中的文件移动到服务端存放文件的目录下,然后删除临时目录下的文件即可。具体代码如下:

2、实现效果

四、获取代码

代码下载地址:

Node.js入门教程:在windows和Linux上安装配置Node.js图文教程 本章节我们将向大家介绍在window和Linux上安装Node.js的方法。本安装教程以Node.jsv0..版本为例。Node.js安装包及源码下载地址为:

Node.js中使用计时器定时执行函数详解 如果你熟悉客户端JavaScript编程,你可能使用过setTimeout和setInterval函数,这两个函数允许延时一段时间再运行函数。比如下面的代码,一旦被加载到Web页

Node.js中使用事件发射器模式实现事件绑定详解 在Node里,很多对象都会发射事件。比如,一个TCP服务器,每当有客户端请求连接就会发射connect事件,又比如,每当读取一整块数据,文件系统就会发

标签: Nodejs+express+html5 实现拖拽上传

本文链接地址:https://www.jiuchutong.com/biancheng/370849.html 转载请保留说明!

上一篇:Node.js插件的正确编写方式(nodejs 插件开发)

下一篇:Node.js入门教程:在windows和Linux上安装配置Node.js图文教程(nodejs实战教程)

  • 房地产企业样板房会计处理
  • 固定资产报废收入
  • 一般纳税人商品混凝土税率
  • 持有至到期投资核算内容
  • 折旧费属于什么科目
  • 用房租入股
  • 进项税额转出税率
  • 生鲜配送公司财务制度
  • 什么叫复式记账凭证
  • 固定资产抵债要交税吗怎么交
  • 合并报表投资收益为什么要抵消
  • 以旧换新的金子划算吗
  • 净利润增长率计算公式是什么意思
  • 捐赠个人支出需要交纳个税吗?
  • 咨询服务费属于什么会计科目
  • 房租发票进项税可以抵扣吗
  • 企业固定资产的盘亏净损失
  • 收购药材再销售可以免税
  • 简易计税的劳务公司员工社保可以抵扣增值税吗
  • 资产负债表损益表现金流量表
  • 社保企业报盘是什么
  • 关于购买专业书籍的请示
  • 财务报表申报错了怎么撤销
  • 如何看懂财务报表的书
  • 对外投资收益要交税吗
  • 企业所得税汇算清缴操作流程
  • 苹果电脑录屏的视频保存在哪里
  • 电脑任务栏在右边怎么调回下边
  • 缴纳增值税会计处理
  • 房屋租赁经营要交哪些税
  • 巴伐利亚州地图
  • 企业所得税季度预缴是什么意思
  • 企业需要税务登记吗
  • 图森在哪
  • 生育津贴有什么补贴
  • cobit框架
  • 开发费用怎么入账
  • php遍历数组使用的是
  • 宝塔主机分销系统设计
  • 民营医院发票样式
  • 去年发生了什么
  • kppw源码
  • 短期借款属于经营活动还是筹资活动
  • 本期应补退税额为负数怎么申报
  • 企业支付股利属于由( )引起的财务活
  • 制造费用分配后总账月末余额在哪方?
  • 可供出售交易性金融资产初始计量
  • 红冲更正的正确分录
  • 存货核算方法有五种
  • 疫情期间社保减免了几个月
  • 差旅费属于什么会计科目 会计分录
  • 餐费开增值税专用发票
  • 住宿费用专票可以抵扣吗
  • 广告费收入如何填写增值税申报表
  • 新政府会计固定资产的核算与计量
  • 企业增值税额
  • 政府会计制度累计盈余为负数
  • 管理费用当月可以结转吗
  • 企业软件开发哪家好
  • linux深入理解
  • 没有vcd怎么放光盘
  • win8系统升级
  • 最近一段时间勒索病毒在全球集中爆发
  • linux 文件管理命令
  • windows7无法激活怎么解决方法
  • 电源管理器在哪
  • shell脚本判断一个字符串是否为空
  • pycharm下载安装
  • unity jsonutility
  • 使用JQuery中的trim()方法去掉前后空格
  • javascript入门教学
  • 使用java
  • python编写登录程序
  • js基础
  • 电子税务局数字证书未检测到证书
  • 国家税务局扬州
  • 黑龙江省国家税务局通用定额发票
  • 广西国家税务局于红林
  • 哪个部门负责药品检验
  • 公司有房屋租赁许可证吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设