webuploader文件上传拖拽上传进度监听类型控制上传结果监听控件

最新推荐文章于 2024-04-28 13:46:58 发布

瑞晟技术服务中心-耿瑞

最新推荐文章于 2024-04-28 13:46:58 发布

阅读量889

点赞数 2

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_45966674/article/details/125610628

版权

webuploader 是一款兼容性很强且也非常好用的前端控件 vue项目中也可以使用
我们先来简单看看
大家可以先下载我上传的资源插件
https://download.csdn.net/download/weixin_45966674/85899651?spm=1001.2014.3001.5503
下载下来后我们可以看到目录如下
在这里插入图片描述
没错这款插件是依赖jquery 这是个小败笔吧不过上一代的技术也确实基本都要依赖jq

然后我们建一个目录建一个webuploader 将这四个文件放进里面
然后和webuploader同级目录创建页面
演示代码如下

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--引入WebUploader文件上传的CSS-->
    <link rel="stylesheet" type="text/css" href="./webuploader/webuploader.css" media="screen" />
    <script type="text/javascript" src="./webuploader/jquery-1.8.3.js"></script>
    <!--引入WebUploader文件上传的JS-->
    <script type="text/javascript" src="./webuploader/webuploader.js"></script>
    <style>
        .maskUpload{
            width: 300px;
            height: 300px;
            background-color: blueviolet;
        }
    </style>
 </head>
 <body>
    <!--用来存放文件信息-->
    <div class="uploader-demo">
        <div class="btns">
            <div id="filePicker">选择文件</div>
            <button id="ctlBtn" class="mybutton" onclick="upload_imgs()">开始上传</button>
            <div class = "maskUpload"></div>
        </div>
    </div>
    <script type="text/javascript">
        var uploader;
        $(function(){
            //初始化Web Uploader,每上传一个文件都会创建一个uploader对象，同时选择多个文件时，则会创建多个uploader对象。
            uploader = WebUploader.create({
                // 选完文件后，是否自动上传。
                auto: false,     //true时，选择文件后自动上传。
                // swf文件路径
                swf: 'resources/widget/webuploader/Uploader.swf',
                // 文件接收服务端。
                server: 'upload/uploadImg',
                // 选择文件的按钮。可选。
                pick: '#filePicker',
                dnd: ".maskUpload",
                accept: {
                    title: '文件上传',
                    //支持上传的文件类型
                    extensions: 'jpg,png,doc,xlsx',
                    mimeTypes: '*'
                }
            });
            
            //当文件被加入队列时触发
            uploader.on('fileQueued',function (file) {
                console.log(file);
            });
            //队列中所有文件上传结束时触发
            uploader.on('error', (type) => {
                console.log('上传文件类型不支持时触发');
            });
            
            //文件上传中实时返回进度
            uploader.on('uploadProgress', (file, percentage) => {
                console.log('上传进度'+percentage);
            });
            //文件上传成功时触发
            uploader.on("uploadSuccess",function (file,response) {
                console.log('上传成功');
            });
            //文件上传错误时触发
            uploader.on('uploadError', (file, reason) => {
                console.log('上传失败');
            });
            //队列中所有文件上传结束时触发
            uploader.on('uploadFinished', (file, reason) => {
                console.log('上传结束');
            });
        })
    
        //上传图片
        function upload_imgs() {
            if (uploader){
                uploader.upload();
            }
        }
    </script>
 </body>
 </html>

然后我们点击上传这里extensions控制文件后缀格式我设置的格式只支持 jpg,png,doc,xlsx

点击上传如果是对的合适就会被加入队列触发fileQueued 每一个文件加入队列都会触发fileQueued 我们可以定义一个数组将fileQueued的每一次文件流都存起来展示用
在这里插入图片描述

然后我们上传不支持的格式就会被uploadFinished拦截下来

我们点击上传就会触发uploadProgress 这个是这款框架我觉得最大的亮点可以监听到上传的进度走到多少了
执行 uploader.upload();直接上传
上传成功触发uploadSuccess
失败则执行uploadFinished

当然还有一个亮点就是拖拽上传
dnd属性控制里面对应的就是css选择器选择拖拽到哪块元素上触发上传
我们这里设置了 class 为 maskUpload 的div
在这里插入图片描述
我们将文件从电脑直接拖拽到界面上就会触发添加到队列中也是非常的好用

但这个工具需要后台配合 server控制上传的服务端口 swf设置上传的接口名称

瑞晟技术服务中心-耿瑞

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
webuploader文件上传拖拽上传进度监听类型控制上传结果监听控件

webuploader 是一款兼容性很强且也非常好用的前端控件 vue项目中也可以使用我们先来简单看看大家可以先下载我上传的资源插件https://download.csdn.net/download/weixin_45966674/85899651?spm=1001.2014.3001.5503下载下来后我们可以看到目录如下没错这款插件是依赖jquery 这是个小败笔吧不过上一代的技术也确实基本都要依赖jq然后我们建一个目录建一个webuploader 将这四个
复制链接

扫一扫