前端文件上传功能比较依赖后端,所以第一步用nodejs实现一个供文件上传的功能接口。

因为本人对nodejs也是一知半解,所以刚开始的想法是像原始的ajax交互那样,获取上传文件的内容,然后再通过nodejs的buffer的知识,将获取到的文件流输出到准备好的目录中。于是就悲剧了。下面是获取图片资源的代码。

运行结果

首先获取资源是非常的慢,要等几分钟才会输出内容。后来看到可以在每一步获取文件流时就进行文件处理,不必等所有内容获取后再操作。但是随之又产生了一个新问题,就是获取来的文件内容中不仅包括文件内容还包括一些其它信息,需要将与文件内容无关的内容去除掉。还好nodejs中buffer提供了一系列的操作,但是想一想就麻烦的要死,而且还不好保证操作后的内容全部都是文本内容。就在我陷入崩溃的边缘时,看到了nodejs中的一个对象multiparty(简直就是救星),其中专门对formdata对象做了很好封装,完全可以通过调用其中的方法来实现,于是一个上传文件的后端接口便出炉了(想想还有点小激动),下面奉上源码。

前端js代码相对来说就思路很清晰了,主要通过input中type=file上传,可以利用FormData对象将要上传的文件信息写入到这个对象中,这个对象的好用之处就在于可以向其中添加多个图片信息对象,所以多文件上传当然不再是什么难题了!再通过ajax将FormData传送到我们写好的接口中即可。哇,终于大功告成!感兴趣的小伙伴快去实践一下把,有了nodejs,我们大前端终于可以独挡一面了,java什么的去死把.....

javascript结合nodejs实现多文件上传的更多相关文章

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

    Nodejs+Express-实现文件上传下载管理的网站 项目Github地址(对你有帮助记得给星哟):https://github.com/qcer/updo 后端:基于nodejs的express ...

  2. nodejs学习之文件上传

    最近要做个图片上传的需求,因为服务端春节请假回家还没来,所以就我自己先折腾了一下,大概做出来个效果,后台就用了nodejs,刚开始做的时候想网上找一下资料,发现大部分资料都是用node-formida ...

  3. javascript插件uploadify简单实现文件上传

    最近在学习mvc,需要用到文件上传的功能,找了很多的jquery插件,最后决定使用uploadify这个插件,参照了各位大神的博客,终于勉勉强强会用了.在此,做一下笔记,方便以后忘了查看. 首先在官网 ...

  4. nodejs+multer+ajax文件上传

    前端 html代码 + ajax代码 form表单(无需指定action) <form enctype="multipart/form-data" method=" ...

  5. NodeJs koa2实现文件上传

    [转载自:]https://www.jianshu.com/p/34d0e1a5ac70 知识讲解 koa2框架是一个基于中间件的框架,也就是说,需要使用到的功能,比如路由(koa-router),日 ...

  6. NodeJS+formidable实现文件上传加自动重命名

    前述 本人node初学者,此前使用原生node实现文件上传时遇到了一些困难,只做到了.txt 和.png两中格式的文件可以正常上传,如果上传其他格式文件服务端保存的文件会无法正常打开,原因是对form ...

  7. nodejs 简单http 文件上传demo

    // 这是一个简单的Node HTTP,能处理当前目录的文件 // 并能实现良种特殊的URL用于测试 // 用http://localhost:8000 或http://127.0.0.1:8000 ...

  8. nodejs实现单文件上传。

    new了formidable的一个实例. formidable模块可以直接捕获当前数据流的状态并返回文件路径. 主要使用了file事件和end事件. var form = new formidable ...

  9. nodeJS 服务端文件上传

    var http = require('http'); var path = require('path'); var fs = require('fs'); function uploadFile( ...

随机推荐

  1. 一行代码解决IE6/7/8/9/10兼容问题

    百度源代码如下 <!Doctype html><html xmlns=http://www.w3.org/1999/xhtml xmlns:bd=http://www.baidu.c ...

  2. nginx中有关命令和日志切割,配置文件加载的详细阐述

    一.Nginx简介 Nginx (“engine x”) 是俄罗斯人Igor Sysoev(塞索耶夫)编写的一款高性能的 HTTP 和反向代理服务器.Nginx 已经在俄罗斯最大的门户网站── Ram ...

  3. poj3535 A+B (大数加法)

    A+B Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 811   Accepted: 371 Description The ...

  4. 2、CDH组件安装

    一.zookeeper 1.安装 继续->完成: 二.HDFS 1.安装 继续->完成: 三.yarn.hive 1.安装yarn 继续->完成: 2.安装hive 继续->完 ...

  5. C# 中的迭代器 yield关键字 提高性能和可读性

    展示一个例子 IList<string> FindBobs(IEnumerable<string> names) { var bobs = new List<string ...

  6. 点击实现CSS样式切换

    如图所示 代码如下图: 特别要注意的是:a标签不会继承上级的color,所以要单独为其设置 参看代码(并非上图代码)如下: <!DOCTYPE html> <html> < ...

  7. IT兄弟连 Java语法教程 Java语言背景

    驱使计算机语言革新的因素有两个:程序设计技术的改进和计算环境的改变.Java也不例外.在大量继承C和C++的基础之上,Java还增加了反应当前程序设计技术状态的功能与精华.针对在线环境的蓬勃发展(In ...

  8. jQuery EasyUI/TopJUI创建树形表格下拉框

    jQuery EasyUI/TopJUI创建树形表格下拉框 第一种方法(纯HTML创建) <div class="topjui-row"> <div class= ...

  9. day8文件操作作业详解

    1.day8题目 1,有如下文件,a1.txt,里面的内容为: 老男孩是最好的培训机构, 全心全意为学生服务, 只为学生未来,不为牟利. 我说的都是真的.哈哈 分别完成以下的功能: a,将原文件全部读 ...

  10. 关于java多线程任务执行时共享资源加锁的方式思考

    1.加锁方式: 1-1.使用synchronized关键字进行方法或代码块的加锁方式 1-2.使用ReentrantLock类提供的lock()方法的方式 2.代码实现(传统的银行取款存款问题): 2 ...