功能:上传文件到服务器,图片支持客户端本地预览。

服务端

//server.js

'use strict';
const http = require('http');
const url = require('url');
const util = require('util');
const fs = require('fs');
const formidable = require('formidable');
const path = require('path');

http.createServer(function(req,res) {

    if (req.url == '/upload' && req.method.toLowerCase() == 'post') {
        var form  = new formidable.IncomingForm();
        form.encoding = 'utf8';
        form.uploadDir = path.resolve(__filename,'../dir');
        form.keepExtensions = true;  //给文件加上对应的扩展名;
        form.parse(req, function(err, fields, files) {
            res.writeHead(200, {'content-type': 'text/plain'});
            res.write('received upload:\n\n');
            res.end(util.inspect({fields: fields, files: files}));
        });
    } else {
        res.writeHead(200,{'Content-Type':'text/html;charset=utf8'});
        fs.readFile('./index.html',function(err,data) {
            res.end(data);
        });
    }

}).listen(70,function(){
    console.log('ok');
})

客户端

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    <form>
        <input type="file" id="uploadFile"/>
        <img style="width:100px;height:auto" id="previewFile" src="" alt=""/>
        <input type="button" id="btn" value="提交"/>
    </form>
    <script src="//cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
    <script>
        document.querySelector('#uploadFile').onchange = function() {
            var reader = new FileReader();
            if (document.querySelector('#uploadFile').files.length > 0){
                var source = document.querySelector('#uploadFile').files[0];

                reader.readAsDataURL(source);
                reader.onload = function(oFREvent) {
                    document.querySelector('#previewFile').src = oFREvent.target.result;
                }
            } else {
                return;
            }

        };
        document.querySelector('#btn').onclick = function() {
            var formData = new FormData();
            formData.append('file',$('#uploadFile')[0].files[0]);
            formData.append('hello','asddsfs');
            $.ajax({
                url: '/upload',
                type: 'post',
                data: formData,
                processData: false,  // 告诉jQuery不要去处理发送的数据
                contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
                success:function(data) {
                    console.log(data);
                }
            })
        }
    </script>
    </body>
    </html>

nodejs应用:文件上传的更多相关文章

  1. NodeJs之文件上传

    NodeJs之文件上传 一,介绍与需求 1.1,介绍 1,multer模块 multer用于处理文件上传的nodejs中间件,主要跟express框架搭配使用,只支持表单MIME编码为multipar ...

  2. Nodejs express 文件上传

    文件上传 以下我们创建一个用于上传文件的表单,使用 POST 方法,表单 enctype 属性设置为 multipart/form-data. index.htm 文件代码修改如下: <html ...

  3. nodejs实现文件上传

    在使用ant-design的upload上传文件时,前端很好实现,那么我们如何实现node服务端呢? 服务端文件上传实现 var express = require('express'); var f ...

  4. nodejs+multiparty 文件上传

    通过表单提交上传文件:     html代码 <form action="/uploadFile" method="post" enctype=" ...

  5. nodeJs实现文件上传，下载，删除

    转:https://blog.csdn.net/qq_36228442/article/details/81709272 一.简介 本文介绍了nodeJs+express框架下,用multer中间件实 ...

  6. 【nodejs】文件上传demo实现

    文件结构: index.js var server = require('./server.js'); var router = require('./router.js'); var request ...

  7. Html5+NodeJS——拖拽多个文件上传到服务器

    实现多文件拖拽上传的简易Node项目,可以在github上下载,你可以先下载下来:https://github.com/Johnharvy/upLoadFiles/. 解开下载下的zip格式包,建议用 ...

  8. Nodejs进阶：基于express+multer的文件上传

    关于作者 程序猿小卡,前腾讯IMWEB团队成员,阿里云栖社区专家博主.欢迎加入 Express前端交流群(197339705). 正在填坑:<Nodejs学习笔记> / <Expre ...

  9. nodejs学习之文件上传

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

随机推荐

  1. python第十五天

    什么是模块? 一系列功能的集合 定义模块? 创建一个py文件就是一个模块,该py文件名就是模块名 怎么使用模块? 在要是用的模块文件中通过import 模块名 来导入模块 模块的四种方式? 1.编译执 ...

  2. 2018-2019-2 20165239其米仁增《网络对抗》Exp1 PC平台逆向破解

    一.实验内容 1.掌握NOP, JNE, JE, JMP, CMP汇编指令的机器码(0.5分) 2.掌握反汇编与十六进制编程器 (0.5分) 3.能正确修改机器指令改变程序执行流程(0.5分) 4.能 ...

  3. UOJ#335. 【清华集训2017】生成树计数 多项式,FFT,下降幂,分治

    原文链接www.cnblogs.com/zhouzhendong/p/UOJ335.html 前言 CLY大爷随手切这种题. 日常被CLY吊打系列. 题解 首先从 pruffer 编码的角度考虑这个问 ...

  4. 相机标定问题-Matlab & Py-Opencv

    一.相机标定基本理论 1.相机成像系统介绍 图中总共有4个坐标系: 图像坐标系:Op    坐标表示方法(u,v)                 Unit:Dots(个) 成像坐标系:Oi      ...

  5. docker-compose模板文件参数说明

    working_dir:一般这个参数用在应用程序Services下,我们指定应用程序所在的目录为当前目录,类似linux中的cd working_dir.其余的参数,例如command等就是基于此参数 ...

  6. AutoCAD下载

    AutoCAD 2019 64位破解版 附注册机和安装教程  1.71G AutoCAD 2019 64位精简优化版 珊瑚の海简体中文版691.08M

  7. LOJ.6435.[PKUSC2018]星际穿越(倍增)

    LOJ BZOJ 参考这儿qwq. 首先询问都是求,向左走的最短路. \(f[i][j]\)表示从\(i\)走到\(j\)最少需要多少步.表示这样只会\(O(n^2\log n)\)的= =但是感觉能 ...

  8. 操作系统PV编程题目总结一

    1.今有一个文件F供进程共享,现把这些进程分为A.B两组,规定同组的进程可以同时读文件F:但当有A组(或B组)的进程在读文件F时就不允许B组(或A组)的进程读文件F.试用P.V操作(记录型信号量)来进 ...

  9. 解决win10搜索框不能使用的问题

    1.首先,打开管理员命令窗口,win+x,可以看到弹出一个窗口,打开windows Powershell(管理员) 2,输入 Get-AppXPackage -Name Microsoft.Windo ...

  10. Pandas 1 表格数据类型DataFrame

    # -*- encoding:utf-8 -*- # Copyright (c) 2015 Shiye Inc. # All rights reserved. # # Author: ldq < ...