zoukankan      html  css  js  c++  java
  • node.js+express+jade系列六:图片的上传

    安装npm install formidable

    先把文件上传到临时文件夹,再通过fs重命名移动到指定的目录即可

    fs.rename即重命名,但是fs.rename不能夸磁盘移动文件,所以我们需要指定上传的临时目录要和最终目录在同一磁盘下

    前段请求

    方法1:使用form标签和submit提交

         form(action='/uploadImg', method="post", enctype="multipart/form-data" )
             input(type="file", id="file1", name="file1")
             br
             button(type="submit", id="bt1", name="bt1") upload

    方法2:ajax,post提交

        input(type="file", id="file1", name="file1")

               button(id="upload", name="upload") submit

               javascript方法

        $("#upload").click(function(){

          var data = new FormData();

          var files = $("#file1")[0].files;

          if(files){

            data.append("file", files[0]);

          }

          $.ajax({

            type: 'post',

            dataType: 'json',

            url:'/uploadImg',

            data : data,

            contentType: false,

            processData: false,

            success : function () {}

          }    

    上传实现方法:form解析后的files是个对象,所以可以实现多文件上传

    tool.uploadImg =function(req, res){
        var fs = require('fs');
        var formidable = require("formidable");
        var form = new formidable.IncomingForm();
        form.uploadDir = "./public/upload/temp/";//改变临时目录
        form.parse(req, function(error, fields, files){
            for(var key in files){
                var file = files[key];
                var fName = (new Date()).getTime();
                switch (file.type){
                    case "image/jpeg":
                        fName = fName + ".jpg";
                        break;
                    case "image/png":
                        fName = fName + ".png";
                        break;
                    default :
                        fName =fName + ".png";
                        break;
                }
                console.log(file.size);
                var uploadDir = "./public/upload/" + fName;
                fs.rename(file.path, uploadDir, function(err) {
                    if (err) {
                        res.write(err+" ");
                        res.end();
                    }
                    res.write("upload image:<br/>");
                    res.write("<img src='/imgShow?id=" + fName + "' />");
                    res.end();
                });
            }
        });
    };

    显示上传后的文件

    tool.imgShow = function(req, res){
        var fs = require("fs");
        var arg = tool.handleGetArg(req, res);
        var uploadDir = "./public/upload/" + arg["id"];
        fs.readFile(uploadDir, "binary", function(err, file){
            if(err){
                res.write(err+" ");
                res.end();
            }else{
                res.write(file, "binary");
                res.end();
            }
        });
    };

  • 相关阅读:
    Win7 64位 php-5.5.13+Apache 2.4.9+mysql-5.6.19 配置
    C# .NET 使用第三方类库DotNetZip解压/压缩Zip rar文件
    64位window7,php5.5.10 +IIS7 配置
    eclipse下编译openfire3.9.1源码
    asp.net 解决IE11下 From身份验证失效问题
    MySQL 数据类型 详解
    ASP.NET安全
    Microsoft Anti-Cross Site Scripting Library V4.2 下载地址
    Entityframework Core去掉外键
    VS2019发布Docker实践
  • 原文地址:https://www.cnblogs.com/ajun/p/3559183.html
Copyright © 2011-2022 走看看