javascript结合nodejs实现多文件上传

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

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

运行结果

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

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

时间： 2024-10-25 11:01:09

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

nodejs 简单http 文件上传demo

// 这是一个简单的Node HTTP,能处理当前目录的文件 // 并能实现良种特殊的URL用于测试 // 用http://localhost:8000 或http://127.0.0.1:8000 连接这个服务器 // 首先,加载所有要用的模块 var http = require('http'); // HTTP服务器API var fs = require('fs'); // 文件系统API var server = new http.Server(); // 创建新的HTTP服务器 va

基于Nodejs的大文件上传之断点续传

接着<扒一扒Nodejs formidable的onPart>和<也说文件上传之兼容IE789的进度条---丢掉flash>:前面已完成兼容IE789的大文件上传:无flash的低版本进度条,高版本的分段上传,并已为断点续传做好铺垫: 说什么做好铺垫,原本以为Nodejs端已没问题,只剩前端依靠HTML5接着监听abort事件,保存中断时上传到第几块了(断点续传只支持文件比较大,然后意外上传中断了,暂时定50M开启断点续传吧),通过文件内容hash和该文件唯一上传token来记录断

nodejs学习之文件上传

最近要做个图片上传的需求,因为服务端春节请假回家还没来,所以就我自己先折腾了一下,大概做出来个效果,后台就用了nodejs,刚开始做的时候想网上找一下资料,发现大部分资料都是用node-formidable插件实现上传的.但是自己又想手动实现一下,所以就开始折腾了.写此博文也就是做个记录. 先大概整理一下整个思路,自己想要实现的效果是能够在页面上无刷新上传一个图片并且显示(后来做着做着就变成所有文件的上传了,不过都一个样). 在前端部分,想要无刷新首先想到的是ajax,但是ajax无法上传文件,

nodejs+multer+ajax文件上传

前端 html代码 + ajax代码 form表单(无需指定action) <form enctype="multipart/form-data" method="post" class="upload-cont"> <input type="file" name="files1" class="files1"> <input type="text

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

最近在学习mvc,需要用到文件上传的功能,找了很多的jquery插件,最后决定使用uploadify这个插件,参照了各位大神的博客,终于勉勉强强会用了.在此,做一下笔记,方便以后忘了查看. 首先在官网上下载uploadify插件.http://www.uploadify.com/download/ 解压后有以下文件: 然后在把下载下来的文件解压到项目文件夹中(只要项目可以引用到就可以了,但还是应该规范一点,养成良好的习惯). 再然后,就是把uploadify.css和jquery.uploadi

nodejs实现单文件上传。

new了formidable的一个实例. formidable模块可以直接捕获当前数据流的状态并返回文件路径. 主要使用了file事件和end事件. var form = new formidable.IncomingForm(); form.uploadDir="/localnonobank/test/images/"; form.on('file', function(name,file){ filepath=file.path; filename=file.name; }); f

Nodejs+HTML5兼容IE789的大文件上传完整版

业余将大文件上传重新梳理了一遍,后端基于Nodejs:有几个要点感觉很好玩: 兼容性:IE789为代表: 跨域上传:document.domain||middlePage: 多文件上传:input['type=file'] multiple: 拖拽上传:drag drop: 大文件分段:files.slice(s,e): 断点续传:localStorage: 接收分段的文件:formidable.onPart: 陆续写入分段文件:fs.write(fd,bf,offset,length,posi

文件上传的步骤

文件上传的步骤: 1.<input type="file" /> 2.首先要更改form的enctype="multipart/form-data" 表示向服务器传输的过程中以二进制的方式传输 默认传输类型: enctype="application/x-www-form-urlencoded" 3.相关jar包 下载地址 www.apache.org commons-fileupload-1.2.1.jar 核心组件包 common

Javascript Fromdata 与jQuery 实现Ajax文件上传以及文件的删除

前端HTML代码: <!DOCTYPE html> <html> <head> <title>ajax</title> <script type="text/javascript" src="js/jquery.js"></script> <meta charset="utf-8" /> <style type="text/css&qu