webuploader

最新推荐文章于 2024-05-03 23:03:35 发布

炉火纯青-旺

最新推荐文章于 2024-05-03 23:03:35 发布

阅读量100

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_34870529/article/details/129768399

版权

<!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>
    <link href="./css/webuploader.css" rel="stylesheet">
    <script src="./js/jquery.js"></script>
    <script src="./js/webuploader.js"></script>
    <style>
        #upload-container {
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <div id="upload-container">
        <span>点击或者拖拽到此处上传</span>
    </div>
    <span id="picker" class="showclass">点击上传文件</span>

    <script>
        let uploader = WebUploader.create({
            auto: true, // 选完文件后，是否自动FF上传。
            swf: './swf/Uploader.swf', // swf文件路径
            // server: 'http://10.30.10.190:8814/api/v1/ops/upload',  // 文件接收服务
            server: 'http://10.30.10.190:8815/upload',
            dnd: '#upload-container',
            pick: '#picker', // 内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id
            // multiple: false, // 选择多个
            threads: 50, // 上传并发数。允许同时最大上传进程数。
            method: 'POST', // 文件上传方式，POST或者GET。
            fileSizeLimit: 1024 * 1024 * 1024 * 5, //验证文件总大小是否超出限制, 超出则不允许加入队列。
            fileSingleSizeLimit: 1024 * 1024 * 1024 * 5, //验证单个文件大小是否超出限制, 超出则不允许加入队列。
            fileVal: 'file', // [默认值：'file'] 设置文件上传域的name，后端接收
            duplicate: true, //允许重复上传
            formData: {
                // env:'test07'
            },
            chunked: true
        });
        
        // 文件被加入队列之前触发，此事件的handler返回值为false, 则此文件不会被添加进队列
        uploader.on('beforeFileQueued', function (file) {
            console.log('beforeFileQueued', file);
        });
        
        // 当文件被加入队列后触发
        uploader.on('fileQueued', function (file) {
            // console.log('fileQueued', file);
            uploader.md5File(file)
                // 及时显示进度
                .progress(function(percentage) {
                    console.log('Percentage:', percentage);
                })
                // 完成
                .then(function(val) {
                    console.log('md5 result:', val);
                });
        });
        
        // 当一批文件加入队列后触发
        uploader.on('filesQueued', function (file) {
            console.log('filesQueued', file);
        });
        
        // 文件上传过程中触发，携带上传进度
        uploader.on('uploadProgress', function (file, percentage) {
            console.log('uploadProgress', file, percentage);
        });
        
        // 当文件上传出错时触发
        uploader.on('uploadError', function (file, response) {
            console.log('uploadError', file);
            console.log('uploadError1', response)
        });
        
        // 当文件上传成功时触发
        uploader.on('uploadSuccess', function (file, response) {
            console.log('uploadSuccess', file);
            console.log('uploadSuccess', response)
        });
        
        // 所有文件上传结束时触发
        uploader.on('uploadFinished', function () {
            console.log('uploadFinished', '文件上传结束');
        });

    </script>
</body>

</html>