批量上传

最新推荐文章于 2025-03-14 11:02:42 发布
原创最新推荐文章于 2025-03-14 11:02:42 发布 · 215 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#jquery #java #js #vue #html
看看我咯
稍作修改
<!DOCTYPE html>
<html>
<head>
    <title>Bulk Upload</title>
    <style type="text/css">
        .progressbar {
            background-color: lime;
            height: 20px;
            text-align: center;
            width: 0px;
        }

        .progress {
            border: 1px solid lime;
            width: 300px;
        }

        .filelist li {
            margin-bottom: 20px;
        }
    </style>
    <script src="../lib/jquery/jquery-1.5.2.min.js"></script>
</head>
<body>
    <div>
        <input type="file" id="fileMultiple" name="files" multiple="multiple" />
        <div style="margin: 20px 0px 20px">
            <hr />
            上传失败文件：
            <span id="failUploadFile"></span>
            <hr />
        </div>
        <ol class="filelist"></ol>
    </div>

    <script>
        var fileIndex = 0;
        var uploadFile = null;
        var $failUploadFile = $('#failUploadFile');
        $(function () {
            $("#fileMultiple").change(function eventStart() {

                //获取当前选择的所有文件
                uploadFile = this.files;

                //循环添加进度条
                for (var i = 0; i < uploadFile.length; i++) {
                    $(".filelist").append(
                        "<li id=" + i + "file>" +
                        "<div class='progress'>" +
                        "<div id = " + i + "bar class= 'progressbar' ></div >" +
                        "</div >" +
                        "<span class='filename'>" + uploadFile[i].name + "</span>" +
                        "<span id = " + i + "pps class= 'progressnum' > - " + Math.round(uploadFile[i].size / 1024) + "KB</span >" +
                        "</li>");
                }

                //上传文件
                upload();

            }).click(function () {

                //每次点击选择文件，都清空上传记录
                $('.filelist').empty();
                $failUploadFile.text('');
            });

            function upload() {

                //采用递归的方式循环发送ajax请求
                if (fileIndex >= uploadFile.length) {
                    $("#fileMultiple").val("");
                    fileIndex = 0;
                    return;
                }

                //将file对象添加到formData对象中
                var formData = new FormData();
                formData.append('Filedata', uploadFile[fileIndex]);
                $.ajax({
                    url: 'UploadPhoto.aspx',
                    type: 'POST',
                    cache: false,
                    data: formData,         //文件以formData形式传入
                    processData: false,     //必须false
                    contentType: false,     //必须false才会自动加上正确的Content-Type
                    xhr: function () {      //监听用于上传显示进度
                        var xhr = $.ajaxSettings.xhr();
                        if (onprogress && xhr.upload) {
                            xhr.upload.addEventListener("progress", onprogress, false);
                            return xhr;
                        }
                    },
                    success: function () {

                        //递归条件
                        fileIndex++;
                        upload();
                    },
                    error: function () {

                        //展示上传失败文件
                        $failUploadFile.text($failUploadFile.text() + '\xa0<' + uploadFile[fileIndex].name + '>\xa0|');
                        $(".filelist").find("#" + fileIndex + "bar").text('').css({ width: '100%', 'background-color': 'red' });

                        //递归条件
                        fileIndex++;
                        upload();
                    }
                });

            }

            function onprogress(evt) {

                //已经上传的百分比
                var uploadPercent = Math.floor(evt.loaded / evt.total * 100) + '%';
                $(".filelist").find("#" + fileIndex + "bar").text(uploadPercent).width(uploadPercent);
            };

        })
    </script>

</body>
</html>