基于Ajax和FormData对象实现二进制文件上传

最新推荐文章于 2022-09-19 09:33:19 发布

火星飞鸟

最新推荐文章于 2022-09-19 09:33:19 发布

阅读量400

点赞数 2

分类专栏：前后端交互 Ajax 文章标签：前端 ajax javascript

本文链接：https://blog.csdn.net/Jack_lzx/article/details/109751111

版权

前后端交互同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

Ajax

8 篇文章 0 订阅

订阅专栏

原理：

将用户选择的文件追加到FormData表单对象中，发送给服务端。服务端接收到后，再将图片地址返回给客户端，客户端根据地址来显示图片，实现预览效果。

实现效果：

启动app.js
在浏览器地址栏输入http://localhost:3000/upload.html

实现代码：

客户端upload.html：
（引入了bootstrap框架bootstrap.min.css）

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
    <style type="text/css">
        .container {
            padding-top: 60px;
        }
        
        .padding {
            padding: 5px 0 20px 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="form-group">
            <label>请选择文件</label>
            <input type="file" id="file">
            <div class="padding" id="box">
                <!--<img src="" class="img-rounded img-responsive">-->
            </div>
            <div class="progress">
                <div class="progress-bar" style="width: 0%;" id="bar">0%</div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        // 获取文件选择控件
        var file = document.getElementById('file');
        // 获取进度条元素
        var bar = document.getElementById('bar');
        // 获取图片容器
        var box = document.getElementById('box');
        // 为文件选择控件添加onchanges事件
        // 在用户选择文件时触发
        file.onchange = function() {
            // 创建空的formData表单对象
            var formData = new FormData();
            // 将用户选择的文件追加到formData表单对象中，this指向file
            formData.append('attrName', this.files[0]);
            // 创建ajax对象
            var xhr = new XMLHttpRequest();
            // 对ajax对象进行配置
            xhr.open('post', 'http://localhost:3000/upload');
            // xhr.upload.onprogress在文件上传的过程中持续触发
            xhr.upload.onprogress = function(ev) {
                // ev.loaded 文件已经上传了多少
                // ev.total  上传文件的总大小
                var result = (ev.loaded / ev.total) * 100 + '%';
                // 设置进度条的宽度
                bar.style.width = result;
                // 将百分比显示在进度条中
                bar.innerHTML = result;
            };
            // 发送ajax请求
            xhr.send(formData);
            // 监听服务器端响应给客户端的数据
            xhr.onload = function() {
                // 如果服务器端返回的http状态码为200
                // 说明请求是成功的
                if (xhr.status == 200) {
                    // 将服务器端返回的数据显示在控制台中
                    // console.log(xhr.responseText);
                    // 转化为json对象
                    var result = JSON.parse(xhr.responseText);
                    // 动态创建img标签
                    var img = document.createElement('img');
                    // 给图片标签设置src属性
                    img.src = result.path;
                    // 当图片加载完成以后
                    img.onload = function() {
                        // 将图片显示在页面中
                        box.appendChild(img);
                    }
                }
            }

        }
    </script>
</body>

</html>

服务端app.js：

// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
// 引入formidable模块
const formidable = require('formidable');
// 创建web服务器
const app = express();

// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));

// 实现文件上传的路由
app.post('/upload', (req, res) => {
    // 创建formidable表单解析对象
    const form = new formidable.IncomingForm();
    // 设置客户端上传文件的存储路径
    form.uploadDir = path.join(__dirname, 'public', 'uploads');
    // 保留上传文件的后缀名字
    form.keepExtensions = true;
    // 解析客户端传递过来的FormData对象
    form.parse(req, (err, fields, files) => {
        // 将客户端传递过来的文件地址响应到客户端
        res.send({
            // 客户端只能访问public里的文件，所以要分隔path
            path: files.attrName.path.split('public')[1]
        });
    });
});

// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');

火星飞鸟

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
基于Ajax和FormData对象实现二进制文件上传

实现效果：启动app.js在浏览器地址栏输入http://localhost:3000/upload.html实现代码：客户端upload.html：（引入了bootstrap框架bootstrap.min.css）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <
复制链接

扫一扫