nodejs+multiparty实现无刷新上传图片

nodejs无刷新上传需要用到的:jQuery、form表单、multiparty(nodejs模块)。

前端代码(需要引入jQuery)

<form id="from">
    <input type="file" name="file">
    <input id="submit_btn" type="button" value="提交">
</form>
<script>
    $("#submit_btn").click(function () {
        var formData = new FormData(document.getElementById("from"));
        $.ajax({
            url:"http://127.0.0.1:8000/form_file",
            type:"post",
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success:function (data) {
                console.log(data)
            },error:function (err) {
                console.log(err);
            }
        })
    })
</script>

nodejs代码(需要引入multiparty模块)

var express = require("express");
var app = express();
var multiparty = require("multiparty");
app.use(express.static(__dirname));//设置静态资源路径
app.post("/form_file",function (req,res) {
    var form = new multiparty.Form({uploadDir: "./imgs/"});//存放路径
    form.parse(req, function (err, filed, files) {
        if(err) res.json({msg:"文件上传失败!"});
        else  {
            res.json({msg:"文件上传成功!"});
        }
    })
});
app.listen(8000);

注意:这里上传的文件,文件名字是随机生成的。如图:

改文件名字

app.post("/form_file",function (req,res) {
    var form = new multiparty.Form({uploadDir: "./imgs/"});//存放路径
    form.parse(req, function (err, filed, files) {
        if(err) return res.json({msg:"文件上传失败!"});
        var inputFile = files.file[0];
        var uploadedPath = inputFile.path;
        var dstPath = "./imgs/" + inputFile.originalFilename;//更改后的文件名字
        //更改上传后的文件名字
        fs.rename(uploadedPath, dstPath, function (error) {
            if (error) {
                res.json("上传失败!");
                console.log("rename error: " + error);
            } else {
                res.json("上传成功!");
                console.log("rename ok");
            }
        });
    })
});

nodejs实现无刷新上传图片

转载请注明出处!

查看微博长图