zoukankan      html  css  js  c++  java
  • ajax实现二进制文件上传

    1.用formData对象来保存二进制文件数据

    2.将formData对象通过ajax上传给服务器

    3.实时监听上传进度绘制进度条

    4.将图片显示在页面中(服务器返回图片路径,客户端读取路径并显示图片)

    代码中没有实现图片显示

    前端代码

    <div>
                    <div class="form-group">
                        <label>请选择文件</label>
                        <input type="file" id="file" />
                    </div>
                    <div class="progress" style=" 300px; height: 10px;background-color: #0000FE;">
                        <div class="progress-bar" style="height:100%;  0%; background-color: #00FF00;">0%</div>
                    </div>
                </div>
                <script>
                    // 获取文件选择空间
                    var file = document.getElementById("file")
                    // 获取进度条元素
                    var pro = document.querySelector('.progress-bar')
                    file.onchange = function(){
                        // 创建空的formData对象
                        var formData = new FormData();
                        // 将用户选择的文件追加到formData表单对象中
                        formData.append('arrtName',file.files[0])
                        // console.log(formData)
                        // 创建ajax对象
                        var xhr = new XMLHttpRequest();
                        // 对ajax对象进行配置
                        xhr.open('post','http://localhost:3000/upload')
                        // 在文件上传过程中持续触发
                        xhr.upload.onprogress = function(ev){
                            // ev.loaded 文件已经上传了多少
                            // ev.total 上传文件的总大小
                            var result = (ev.loaded/ev.total)*100 +'%'
                            pro.style.width = result;
                            pro.innerHTML = result;
                        }
                        xhr.send(formData)
                        // 监听响应
                        xhr.onload = function(){
                            if(xhr.status == 200){
                                console.log(xhr.responseText)
                            }
                        }
                    }
                </script>

    服务器端代码

    const express = require('express');
    const path = require('path');
    // const bodyParser = require('body-parser')
    const formidable = require('formidable')
    const app = express()
    app.all('*', function(req, res, next) {
        res.header("Access-Control-Allow-Origin", "http://127.0.0.1:8848");
        res.header("Access-Control-Allow-Headers", "X-Requested-With");
        res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
        res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
        res.header("X-Powered-By",' 3.2.1')
        res.header("Content-Type", "application/json;charset=utf-8");
        res.header("Access-Control-Allow-Credentials",true);
        next();
        });
    app.post('/upload',(req,res)=>{
        // 创建formidable表单解析对象
        const form = new formidable.IncomingForm();
        // 设置客户端上传文件的存储路径
        form.uploadDir = path.join(__dirname,'uoload')
        console.log(path.join(__dirname,'upload'))
        // 保留文件后缀
        form.keepExtensions = true;
        //解析formData对象
        form.parse(req,(err,fields,files)=>{
            res.send(files.arrtName.path)
        })
    })
    app.listen(3000);
    console.log('app服务器启动成功')
  • 相关阅读:
    Protocol Buffer技术详解(语言规范)
    google protobuf 简单实例
    advStringGrid单元格文字垂直居中
    java中两个字符串如何比较大小
    List集合去除重复对象及equals()、hashCode()方法的作用
    Delphi中使用ActiveX的一些心得
    java List去重方式及效率对比
    Visual Studio Code 调整字体大小
    用最简单的例子实现jQuery图片即时上传
    Linux下绝对经典的命令
  • 原文地址:https://www.cnblogs.com/elonkwl/p/13961120.html
Copyright © 2011-2022 走看看