若依一体式项目功能记录

不知名的帅比

于 2024-06-06 11:27:34 发布

阅读量144

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/y3254160873/article/details/139495639

版权

1、进度条实现

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

<head>
    <th:block th:include="include :: header('进度条')" />
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox-content col-sm-3">
                    <h5>上传进度条</h5>
                    <div class="progress progress-striped active">
                        <div class="progress-bar progress-bar-success" id="progress-bar" role="progressbar"
                            aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                            20%
                        </div>
                    </div>
                    <input type="file" id="fileList">
                    <button onclick="uploadFile()">上传</button>

                </div>
            </div>
        </div>

    </div>
    <script th:src="@{/js/jquery.min.js}"></script>


    <th:block th:include="include :: footer" />
    <script type="text/javascript">

        var fileList = new FormData();

        // 文件上传逻辑处理
        document.getElementById('fileList').addEventListener('change', function (e) {
            nowDir = "";
            var files = e.target.files;
            fileList = new FormData();
            for (var i = 0; i < files.length; i++) {
                var formData = new FormData()
                fileList.append("file", files[i])
            }

        });
        // 上传按钮
        function uploadFile() {
            var datax = new FormData()
            datax.append("file", [...fileList.values()][0])
            // 上传文件
            $.ajax({
                type: "POST",
                url: ctx + "iprange/test/upload",
                data: datax,
                processData: false,
                contentType: false,
                success: function (data) {
                    if (data.code === 0) {
                        // 更新当前文件名
                        $.modal.msgSuccess("上传成功");
                    } else {
                        $.modal.alertError("上传失败");
                    }
                },
                error: function (data) {
                    $.modal.alertError("上传失败");
                },
                xhr: function xhr() {
                    //获取原生的xhr对象
                    var xhr = $.ajaxSettings.xhr();
                    if (xhr.upload) {
                        //添加 progress 事件监听
                        xhr.upload.addEventListener('progress', function (e) {
                            //e.loaded 已上传文件字节数
                            //e.total 文件总字节数
                            var percentage = (e.loaded / e.total * 100).toFixed(2)

                            if (percentage === parseFloat(percentage.slice(0, -1)).toFixed(2)) {
                                percentage = percentage.slice(0, -1)
                                if (percentage === parseFloat(percentage.slice(0, -1)).toFixed(1)) {
                                    percentage = percentage.slice(0, -2)
                                }
                            }
                            $("#progress-bar").css("width", percentage + "%")
                            $("#progress-bar").text(percentage + "%")
                            // console.log("当前进度:" + percentage + "%")
                        }, false);
                    }
                    return xhr;
                },
            })
        }

    </script>
</body>

</html>