FormData实现二进制文件上传(图片预览和进度条展示)

文件上传只能使用post
一、创建文件上传控件

    <input type="file" name="" id="">

二、创建表单对象

 var formData = new FormData();

三、使用append方法向表单追加二进制文件

formData.append('attrName', this.files[0])

四、提交表单对象

xhr.send(formData)
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 06.FormData对象实现二进制文件上传.html -->
    <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;
        }
        
        #s {
            position: relative;
            left: 50%;
            opacity: 0.5;
            z-index: 100;
        }
    </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">
                <span id="s"></span>
                <div class="progress-bar" style="width: 0%; z-index: 10" id="bar"></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表单对象中
            formData.append('attrName', this.files[0]);
            // 创建ajax对象
            var xhr = new XMLHttpRequest();
            // 对ajax对象进行配置
            xhr.open('post', 'http://localhost:3000/upload');
            // 在文件上传的过程中持续触发
            xhr.upload.onprogress = function(ev) {
                    // ev.loaded 文件已经上传了多少
                    // ev.total  上传文件的总大小
                    var result = parseInt(ev.loaded / ev.total) * 100 + '%';
                    console.log(result);
                    // 设置进度条的宽度
                    bar.style.width = result;
                    // 将百分比显示在进度条中
                    s.innerHTML = result;
                }
                // 发送ajax请求
            xhr.send(formData);
            // 监听服务器端响应给客户端的数据
            xhr.onload = function() {
                // 如果服务器端返回的http状态码为200
                // 说明请求是成功的
                if (xhr.status == 200) {
                    // 将服务器端返回的数据显示在控制台中
                    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");
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({
      path: files.attrName.path.split("public")[1]
    });
  });
});

// 监听端口
app.listen(3000);
// 控制台提示输出
console.log("服务器启动成功");
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容