js实现文件上传，node实现文件上传，html实现文件上传,jquery.form实现文件上传

前端html及JS代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="./jquery-1.12.0.min.js"></script>
  <script src="./jquery.form.min.js"></script>
</head>
<body>
  <form id="upload" enctype="multipart/form-data" method="post" action="/fileupload">
    <input type="file" name="file" class="selectFile">
    <button id="submitBtn" onclick="return uploadFile()">确定</button>
  </form>
    
  <script>
    $("#submitBtn").ajaxSubmit(function(response){
        var responseObj = JSON.parse(response);
        console.log(responseObj);
    });
    return false;
  </script>
</body>

</html>

注意：

引入jquery.form.min.js文件，调用ajaxSubmit实现文件上传

form属性enctype="multipart/form-data"不可缺少；

script的return false是阻止表单二次提交和跳转

后端node代码如下

upload.js文件代码如下：

var router = require('express').Router();
var multer = require('multer');
var uxconsole = require('./common/log.js');
var gFilename = "";
var fileDir = '';
var storage = multer.diskStorage({
    destination: function (req, file, callback) {
        callback(null, fileDir);
    },
    filename: function (req, file, callback) {
        gFilename = file.originalname;
        callback(null, gFilename);
    }
});
var upload = multer({storage: storage}).any();

router.post('/', function (req, res, next) {
    res.setTimeout(25000, function () {
        if (res.finished) {
            return;
        }
        dealWithResult(true, 501, "system timeout");
    });
    var url = req.url;
    if (url.indexOf('dir=') != -1) {
        fileDir = url.split('dir=')[1];
    } else {
        fileDir = process.rootdir;
    }

    upload(req, res, function (isErr) {
        if (res.finished) {
            return;
        }
        if (isErr) {
            dealWithResult(true, 200, '上传失败');
        } else {
            dealWithResult(false, 200, '上传成功');
        }
    });
    function dealWithResult(isErr, headNum, rst) {
        var rtRes = {
            rstcode: "error",
            desc: "上传失败",
            data: {}
        };
        if (isErr) {
            rtRes.desc = rst;
        } else {
            rtRes.rstcode = "success";
            rtRes.desc = "上传成功";
            rtRes.data.filename = gFilename;
        }
        // https
        // res.writeHead(headNum, {
        //     'Access-Control-Allow-Methods': 'OPTIONS, HEAD, POST',
        //     'Access-Control-Allow-Origin': '*'
        // });
        res.write(JSON.stringify(rtRes));
        res.end();
    }
});

module.exports = router;

js实现文件上传，node实现文件上传，html实现文件上传,jquery.form实现文件上传

猜你喜欢