文件上传

最新推荐文章于 2024-11-07 19:29:49 发布

不吃饭会饿

最新推荐文章于 2024-11-07 19:29:49 发布

阅读量147

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/celi_echo/article/details/99708735

版权

前端专栏收录该内容

88 篇文章

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片文件上传</title>
    <style>
        .tot {
            width: 300px;
            height: 10px;
            /* border-color: aqua; */
            border: aqua 1px solid;
            /* background-color: aqua; */
        }

        .pro {
            width: 0;
            height: 10px;
            background-color: aqua;
        }
    </style>
</head>

<body>

    
        <form action="http://localhost:8080/" method="post" enctype="multipart/form-data">
            <input type="file" class="file" />
            <input type="submit" value="submit">
        </form>
   
    <br>
    <div class="tot">
        <div class="pro"></div>
    </div>
    <div><img src="" class="img" width="100px" height="100px" alt="请上传文件"></div>
    <script>
        let file;
        var upFile = document.querySelector('.file');
        var filereader = new FileReader();
        filereader.addEventListener('progress', e => {
            document.querySelector('.pro').style.width = (e.loaded / e.total) * 100 + '%';
            document.querySelector('.pro').textContent=(e.loaded / e.total) * 100 + '%'
        });
        filereader.addEventListener('abort', () => alert("zhongzhi"));
        filereader.addEventListener('loadend', () => {
            console.log("end");
            // document.querySelector('.img').src = filereader.result;
            document.getElementsByClassName('img')[0].src=filereader.result;
      
            
        })
        upFile.addEventListener('change', (e) => {
            file = upFile.files[0];
            if (file) {
                filereader.readAsDataURL(file);
            }

        })
    </script>
</body>

</html>

有bug啊，找不到错哪了

const express=require('express');
// const bodyParser=require('body-parser');
const multer=require('multer');

var objMulter=multer({dest: './www/upload/'});

var server=express();

//错误
//server.use(bodyParser.urlencoded({extended: false}));
server.use(objMulter.any());

server.post('/', function (req, res){
console.log(req.files);
});

server.listen(8080);