WebUploader使用记录

csdmwinter
已于 2024-01-11 10:48:12 修改
阅读量410
点赞数 10
分类专栏： upload html 代码笔记文章标签： javascript
于 2023-12-27 10:21:30 首次发布
本文链接：https://blog.csdn.net/csdmwinter/article/details/135238522
版权
代码笔记同时被 3 个专栏收录
2 篇文章 0 订阅
订阅专栏
upload
1 篇文章 0 订阅
订阅专栏
html
1 篇文章 0 订阅
订阅专栏
记录WebUploader学习使用代码，本测试使用的是 WebUploader 0.1.5
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传</title>
    <script src="js/jquery.js"></script>
    <link rel="stylesheet" href="js/webuploader.css">
    <script src="js/webuploader.js"></script>
</head>

<body>
    <input type="file" name="upload" id="upload" onchange="addFile(this)">

    <div>
        <ul id="imageList">

        </ul>
    </div>

    <div id="uploader" class="wu-example">
        <!--用来存放文件信息-->
        <div id="thelist" class="uploader-list"></div>
        <div class="btns">
            <div id="picker">上传</div>
            <button id="ctlBtn" class="btn btn-default">开始上传</button>
        </div>
    </div>
    <input type="button" value="是否上传完成" onclick="checkUpload()">
    <script>
        function addFile(that) {
            let file = that.files[0];
            console.log(file);
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (event) {
                console.log(event);
                let img = new Image();
                img.src = event.target.result;
                img.onload = function () {
                    console.log(this.width);
                    console.log(this.height)
                }
            }
        }

        //使用webuploader上传
        var uploader = WebUploader.create({

            // swf文件路径
            swf: '/js/Uploader.swf',

            // 文件接收服务端。
            server: 'https://localhost:6534/api/Upload/index',

            // 选择文件的按钮,可以是Id，也可以是class
            pick: {
                id: "#picker",
                innerHTML: "选择文件", //指定按钮文字
                multiple: false //是否开起同时选择多个文件能力
            },
            //设定上传文件类型
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            },
            //是否自动上传文件
            auto: true,
            //文件上传请求的参数表，每次发送都会发送此对象中的参数
            formData: {
                fileId: "d172867a-6b31-4530-82a4-6b4e8bd4bcaa"
            },
            //设置文件上传域的name,默认为file
            fileVal: 'files',
            //验证文件总数量, 超出则不允许加入队列
            fileNumLimit: 1,
            //验证文件总大小是否超出限制, 超出则不允许加入队列单位为b
            fileSizeLimit: 2 * 1024 * 1024,
            //验证单个文件大小是否超出限制, 超出则不允许加入队列。
            fileSingleSizeLimit: 2 * 1024 * 1024,
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false
        });

        //当文件被加入队列之前触发，此事件的handler返回值为false，则此文件不会被添加进入队列
        //此处获取图片宽高，可以限制上传图片的宽高(获取宽高是异步方法，此事件中只支持同步，所以文件
        //会正常加入到队列中，回调时判断队列中是否存在此文件，存在就删除掉)
        uploader.on("beforeFileQueued", function (file) {
            let middleFile = file.source;
            //获取到上传的图片文件file
            let uploadFile = middleFile.source;

            //判断图片宽高是否操出设定宽高
            ValidImgWidAndHei(uploadFile, 200, 200).then(res => {
                if (!res) {
                    //判断文件是否加入到队列中，如果加入了则删除
                    if (uploader.getFile(file.id) !== undefined) {
                        console.log(file)
                        alert("宽高超标");
                        uploader.removeFile(file, true);
                    }
                }
                return res;
            });
        });

        //当文件被加入到队列之后触发
        uploader.on("fileQueued", function (file) {
            console.log("加入到队列");
            let $li = $('<li id = "' + file.id + '" class = "file-item thumbnail upload-img-box"> <img></li>');
            let $img = $li.find('img');
            let $ul = $("#imageList");
            $ul.append($li);

            //创建缩略图
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr("src", src);
            }, 100, 30);
        });

        //创建进度条
        uploader.on("uploadProgress", function (file, percentage) {
            let $li = $('#' + file.id);
            let $percent = $li.find('.progress span');
            //避免重复创建
            if (!$percent.length) {
                $percent = $('<p class="progress"><span>上传中</span></p><div class=".progress .progress-bar"').appendTo($li).find('span');
            }
            $percent.css('width', percentage * 100 + '%');
        });

        //当文件被移除队列后触发
        uploader.on("fileDequeued", function (file) {
            console.log("移除队列");
        });

        //当开始上传流程时触发
        uploader.on("startUpload", function () {
            console.log("开始上传");
        });

        //当validate不通过时，会以派送错误事件的形式通知调用者。
        uploader.on("error", function (type) {
            console.log(type);
            let err = ""
            switch (type) {
                case "F_EXCEED_SIZE":
                    err = "单个文件超出设定大小"
                    break;
                case "Q_EXCEED_SIZE_LIMIT":
                    err = "总上传文件超出设定大小"
                    break;
                case "Q_EXCEED_NUM_LIMIT":
                    err = "队列中的数量超出设定个数"
                    break;
                case "Q_TYPE_DENIED":
                    err = "文件类型不符合设定类型";
                    break;
                default:
                    err = type;
                    break;
            }
            alert(err);
        });

        $("#ctlBtn").click(function () {
            console.log("开始");
            uploader.upload();
        });

        //isInProgress()是否正在上传中,true正在上传
        function checkUpload() {
            console.log("是否正在上传中");
            console.log(uploader.isInProgress())
        }

        /**
        校验图片宽高是否超过指定的宽高
        */
        function ValidImgWidAndHei(file, width, height) {
            return new Promise(function (resolve, reject) {
                const reader = new FileReader();
                const image = new Image();
                reader.addEventListener('load', e => image.src = e.target.result);
                image.addEventListener('load', () => resolve(image.width < width && image.height < height));
                reader.readAsDataURL(file);
            })
        }

    </script>
</body>

</html>