夺命雷公狗---node.js---11之文件上传

我们在做文件上传前需要用npm来安装一个插件先,

首先打开项目所在的目录,然后按住shift键然后右键鼠标进入命令行安装formidable

然后开始编写上传的静态页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>附件上传表单</h1>
    <form name="index" action="/post" method="post" enctype="multipart/form-data">
        <label>附件:<input type="file" name="fujian"></label><br /><br />
        <input type="submit" value="上传">
    </form>
</body>
</html>

然后开始编写index.js文件,必须先引入刚才下载好的formidable模块

详细代码如下所示:

var http = require(‘http‘),
    fs = require(‘fs‘),
    url = require(‘url‘),
    util = require(‘util‘),
    formidable = require(‘formidable‘),
    querystring = require(‘querystring‘);
var server = http.createServer(function(req,res){
    var pathname = url.parse(req.url).pathname;
    if(pathname == ‘/index‘){
        var pageContent = fs.readFile(‘index.html‘,‘utf-8‘,function(err,data){
            if(err){
                console.log(‘Server error:111‘);
            }else{
                res.writeHead(200,{"Content-Type":"text/html"});
                res.write(data);
                res.end();
            }
        });
    }else if(pathname == ‘/post‘){
        var form = new formidable.IncomingForm();
        form.uploadDir = ‘./temp‘;
        form.parse(req,function(err,fields,files){
            res.writeHead(200,{"Content-Type":"text/html"});
            console.log(files);//看下文件上传信息
            var path = files.fujian.path;
            var timestamp = (new Date()).valueOf(); //生成时间戳,然后在下面用时间戳给图片命名
            fs.rename(files.fujian.path,"./temp/"+timestamp+‘.jpg‘);//这里的temp目标必须提前准备好,不然报错
            res.end();
        });
    }else{
        res.writeHead(404,{"Content-Type":"text/plain"});
        res.end(‘error:404‘);
        console.log(‘error‘);
    }
});
server.listen(3323);
console.log(‘@http://localhost:3323‘);

然后进行测试。。。

这样我们即可成功完成上传功能....

时间: 2024-12-15 06:50:27

夺命雷公狗---node.js---11之文件上传的相关文章

node.js框架express文件上传操作

1.创建upload.html文件 <form action='/upload' method='post' enctype='multipart/form-data'> 头像:<input type='file' name='userImg'/><br/> <input type='submit' value='上传头像'/> <!-- 使用file上传图片的注意事项: 1. method上传方式必须是post 2. enctype='multipa

JavaScript进阶 九 JS实现本地文件上传至阿里云服务器

JS实现本地文件上传至阿里云服务器 前言 在前面的博客< JavaScript进阶(八)JS实现图片预览并导入服务器功能>(点击查看详情)中,实现了JS将本地图片文件预览并上传至阿里云服务器的操作.这次需要实现将本地打包好的文件上传至阿里云服务器.使用前面的图片文件上传方法无法完成此操作.操作界面如下: 思路 本地与服务端传输文件的格式应该是熟悉的Base64格式.首先需要将本地文件转换为Base64格式,传输至服务端后,在服务端再将Base64格式的文件转换为原始文件. 源码解析 控制器 /

AjaxUpLoad.js使用实现文件上传

AjaxUpLoad.js的使用实现无刷新文件上传,如图. 图1 文件上传前图2 文件上传后 1.创建页面并编写HTML上传文档: <div class="uploadFile"> <span id="doc"><input type="text" disabled="disabled" /></span> <input type="hidden" id

基于uploadify.js实现多文件上传和上传进度条的显示

uploadify是JQuery的一个插件,主要实现文件的异步上传功能,可以自定义文件大小限制.文件类型.是否自动上传等属性,可以显示上传的进度条.官网地址是http://www.uploadify.com/,进入官网首页(不截图了,其实也没啥看的),可以看到uploadify的标语"Upload files like magic",意思是说使用uploadify上传文件如魔法一般.目前一共分为两个版本,Flash版和HTML5版,不过HTML5版是收费的,如图: 这里我们下载Flas

js+php实现文件上传显示文件上传进度条的插件

文件上传利器SWFUpload使用指南(swfupload官网) 上传文件显示进度条效果的插件swfupload.js

js实现图片文件上传的心得

今天研究一下图片上存的一个实现方法,由于上周没写技术周记,这次一定要写好! 那么问题来了:PHP处理图片上传时要求JQ实现数据的交互,怎么办? 这里涉及到的一个logo上传的需求,根据radio选择是否更新logo,同时form表单将以js事件处理 <div class="comLogo sbox"> <div class="CLheader">公司logo:</div> <div class="ui-imgsel

Struts2系列:(11)文件上传

生活赋予我们一种巨大的和无限高贵的礼品,这就是青春:充满着力量,充满着期待,充满着求知,充满着希望. Struts 2使用FileUpload 拦截器和 Commons FileUpload 组件实现文件上传. FileUploadInterceptor 全名:org.apache.struts2.interceptor.FileUploadInterceptor Interceptor that is based off(基于) of MultiPartRequestWrapper,  whi

11.struts2文件上传

文件上传 1.上传单个文件 2.上传多个文件 1.上传单个文件 实现步骤: (1)导入一个Jar包:commons-io-1.3.2.jar.只所以要导入这个Jar包,是因为要用到一个工具类FileUtil.若不使用此工具类,就无需导入此包了. (2)把form表单的enctype设置为:“multipart/form-data”,method设置为“post”,否则此表单不能用于上传. 如下: <form enctype="multipart/form-data" action

node+express4实现简单文件上传

var express = require('express'); var multiparty = require('multiparty'); var app = express(); /*文件上传*/ app.post('/uploadimg', function(req, res, next){ //生成multiparty对象,并配置上传目标路径 var form = new multiparty.Form({uploadDir: './uploads'}); //上传完成后处理 fo