js 原生预览并上传图片

最新推荐文章于 2023-01-12 10:24:57 发布

开心每一天！

最新推荐文章于 2023-01-12 10:24:57 发布

阅读量179

点赞数 1

分类专栏：随记备忘文章标签： FileReader FormData 上传文件 XMLHttpRequest 图片预览

本文链接：https://blog.csdn.net/sdaulee/article/details/100043588

版权

随记备忘专栏收录该内容

49 篇文章 1 订阅

订阅专栏

本文是综合大家的智慧，大家可以随便使用哈。之前也看过有网友说，FileReader不稳定，还确实是这样，测试几次后浏览器就崩了，慢慢再找别的方法吧。这也说明做一个成熟稳定的插件真不容易。废话不说了，进入正题。

实现的效果：

选择图片后，可以预览；

点击上传后有反馈。

预览用到的知识点： FileReader

上传用的： FormData, XMLHttpRequest

附上源码：

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

<head>
    <meta charset="UTF-8">
    <title>FormData发送文件</title>
    <style>
    #showProgress{
        width: 200px;
        height: 28px;
        border: 1px solid #aaa;
        
    }
    #showProgress span{
        display: block;
        background: aliceblue;
        width: 0;
        height: 100%;
        text-align: center
    }
    #imgPreview{

    }
    #imgPreview img{
        margin: 10px;
        border: 3px solid burlywood
    }
    </style>
</head>

<body>

       <div>
        <input type="file" id="files" name="file" multiple /> <input type="button" id="upload" value="上传"><br>
        <div id="imgPreview"></div>
        <div id="showProgress">
            <span id="number"></span>
        </div>
       </div>
            

</body>

<script>
    var imgPreview = document.getElementById('imgPreview')
    document.getElementById('files').onchange = preview;
    document.getElementById('upload').onclick = UpladFile;

    //预览图片
    function preview() {
        imgPreview.innerHTML = '';
        var _this = this;
        var files = _this.files;
        Array.from(files).forEach(file=>{
            var regExp = /\.(jpe?g|png|gif|bmp)$/i;
            if(regExp.test(file.name)){
                var reader = new FileReader();
                reader.onload = function(){
                    var img = new Image();
                    img.width = 200;

                    img.src = this.result;
                    imgPreview.appendChild(img);
                }
                reader.readAsDataURL(file)
            }else{
                alert('文件格式不正确，请上传.jpg,.bmp,.gif,.png格式的图片')
            }
        })
    }

    //上传文件方法
    function UpladFile() {
        var files = document.getElementById('files').files;
        var form = new FormData(); // FormData 对象
        Array.from(files).forEach(file=>{
            // 文件对象
            form.append("file", file);
        })
        
        xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
        xhr.upload.addEventListener('progress',handleProgress);
        xhr.upload.addEventListener('load', handleLoad);
        xhr.upload.addEventListener('error', handleError);
        xhr.upload.addEventListener('abort', handleAbort);

        xhr.open("post", "http://localhost:3000", true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
        xhr.send(form); //开始上传，发送form数据

        function handleProgress(oEvent){
            console.log(oEvent);
            //oEvent.lengthComputable：Boolean类型值
            if(oEvent.lengthComputable){
                var num = oEvent.loaded/oEvent.total * 100 ;
                document.getElementById('number').innerHTML = num=='100' ? '上传完成': num+'%';
                document.getElementById('number').style.width = num * 2 + 'px'
            }else{
                alert('文件长度未知')
            }
        }

        function handleLoad(e){
            console.log('上传完成')
        }

        function handleError(e) {
            console.log('上传出错:'+e)
        }
        function handleAbort(e) {
            console.log('上传取消:'+e)
        }
    }


</script>

</html>

后端也是参考网友的，用node+express+multer,代码贴上

const express = require('express')
const multer = require('multer')
const app = express()
app.use(express.static('public'))
var storge = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads')
    },
    filename: function (req, file, cb) {
        var fileformat = (file.originalname).split('.');
        cb(null, file.fieldname + '-' + Date.now() + '.' + fileformat[fileformat.length - 1]);
    }
})


var upload = multer({ storage: storge })
app.use(express.static('./static'));

app.post('/', upload.array('file', 20), function (req, res, next) {
    console.log(req.files);
    res.send(`msg: "成功",description: "图片已保存"`);
})


app.listen(3000, () => console.log('Example app listening on port 3000!'))

Multer，nodejs中间件，用来处理 multipart/form-data，主要用来上传文件。
Multer 不会处理任何非 multipart/form-data 类型的表单数据。

有点乱，就是方便以后自己找吧，经常练习随便放，以后都找不到了。

开心每一天！

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 原生预览并上传图片

本文是综合大家的智慧，大家可以随便使用哈。之前也看过有网友说，FileReader不稳定，还确实是这样，测试几次后浏览器就崩了，慢慢再找别的方法吧。这也说明做一个成熟稳定的插件真不容易。废话不说了，进入正题。实现的效果：选择图片后，可以预览；点击上传后有反馈。预览用到的知识点： FileReader上传用的： FormData, XMLHttpRequest附上源码：...
复制链接

扫一扫