Js文件上传前后端

最新推荐文章于 2025-12-01 20:13:39 发布

原创最新推荐文章于 2025-12-01 20:13:39 发布 · 546 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #node.js #js #javascript #html

js 同时被 3 个专栏收录

9 篇文章

订阅专栏

javaScript

5 篇文章

订阅专栏

node

3 篇文章

订阅专栏

该博客介绍了一个前端使用HTML、CSS和JavaScript实现的文件上传功能，结合jQuery库处理用户选择的图片并显示预览。当用户点击上传按钮，文件通过AJAX发送到后端。后端使用Node.js和Multer库接收并处理上传的单个文件，将文件保存到指定目录，并返回文件路径等信息。博客涵盖了前端交互和后端文件处理的关键技术。

在这里插入图片描述

前端

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a[class="button-selectimg"] {
            color: #00A2D4;
            padding: 4px 6px;
            border: 1px dashed #00A2D4;
            border-radius: 2px;
            text-decoration: none;
        }

        input[id="avatval"] {
            padding: 3px 6px;
            padding-left: 10px;
            border: 1px solid #E7EAEC;
            width: 230px;
            height: 25px;
            line-height: 25px;
            border-left: 3px solid #3FB7EB;
            background: #FAFAFB;
            border-radius: 2px;
        }

        input[type='file'] {
            border: 0px;
            display: none;
        }

        img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="input-file">
        <progress id="Progress" value="0" max="100"></progress>
        <input type="file" name="avatar" id="avatar" />
        <a href="javascript:void(0);" class="button-selectimg" id="fileChange">选择文件</a>
        <img src="" alt="上传图片..." id="portrait">
        <button id="handleUpload">确认上传</button>
    </div>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    let formData;
    $("#fileChange").click(function () {
        $("input[type='file']").trigger('click');
    });
    $("input[type='file']").change(function () {
        showPreview(this)
    });
    $('#handleUpload').click(function () {
        fileUpload()
    })
    // 收集提交文件
    function showPreview(source) {
        const portraitDom = document.getElementById("portrait");
        const ProgressDome = document.getElementById("Progress");
        let file = source.files[0];
        formData = new FormData()
        formData.append('file', file)
        if (file.type.includes('image')) {
            if (window.FileReader) {
                let fr = new FileReader();
                let total = file.size;
                // 本地预览图片 监听文件变化，返回具体信息
                fr.readAsDataURL(file);
                //  获取文件信息
                fr.onloadend = function (e) {
                    portraitDom.src = e.target.result;
                };
                //  获取进度条信息
                fr.onprogress = function (ev) {
                    let loading = (ev.loaded / total) * 100;
                    ProgressDome.value = loading;
                }
            }
        } else {
            alert('请上传图片')
        }
    }

    //  提交服务
    function fileUpload() {
        if (formData) {
            $.ajax({
                url: "http://localhost:3000/single",
                type: "POST",
                dataType: "JSON",
                data: formData,
                processData: false, // 禁止序列化
                contentType: false,
                success: function (response) {
                    fileFormReset()
                    console.log(response, '成功')
                },
                error: function (error) {
                    fileFormReset()
                    console.log(error, '失败')
                }
            })
        } else {
            alert('请选择上传图片')
        }
    }
    //  需清空重试 img 进图条 金中支重复提交 笔者提醒一下哟 就不写了！！！
    function fileFormReset() {
        formData = null
    }
</script>

后端Node

var express = require('express');
var multer  = require('multer')

var app = express();
let upload = multer({
    storage: multer.diskStorage({
        destination: function (req, file, cb) {
            cb(null, './uploads/');
        },
        filename: function (req, file, cb) {
            var changedName = (new Date().getTime())+'-'+file.originalname;
            cb(null, changedName);
        }
    })
});
 
//单个文件上传
app.post('/single', upload.single('file'), (req, res) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.json({
        code: '0000',
        type: 'single',
        originalname: req.file.originalname,
        path: req.file.path
    })
});

app.listen(3000);