jQuery封装的ajax+h5实现简易上传进度条_jquery+h5 上传文件-优快云博客

本文介绍了一个使用HTML、CSS和JavaScript实现的文件批量上传功能，包括上传进度条的展示及文件格式验证。通过Ajax实现了与服务器端的数据交互，并能够实时反馈上传进度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述
html:

<!--批量上传-->
    <input type="file" id="leading_in" class="hide">
<!--上传进度条-->
    <div class="upfile_progress hide">
        <div>
            上传进度：<progress></progress>
        </div>

        <p id="progress">0 bytes</p>
        <p id="info"></p>
    </div>

css

progress{
    background-color: #56BE64;

}
 progress::-webkit-progress-bar { background: #ccc; }
 progress::-webkit-progress-value  { background: #56BE64; }

javascript:


            // 导入文件
            $('#leading_in').change(function(){

                var exp = /.xls$|.xlsx$/;
                if(exp.exec($(this).val())==null){
                    $(this).val('');//清空
                    layer.msg('格式错误',{icon: 2});
                    return false;
                };
                var data = new FormData();
                data.append('file', $('#leading_in')[0].files[0]);
                data.append('vote_id', $('input[name="vote_id"]').val());

                var file = this.files[0]; //假设file标签没打开multiple属性，那么只取第一个文件就行了
                name = file.name;
                size = file.size;
                type = file.type;
                url = window.URL.createObjectURL(file); //获取本地文件的url，如果是图片文件，可用于预览图片

                $.ajax({
                    url: 'index.php?c=Vote&a=importExcel',
                    type: 'post',
                    data: data,
                    cache: false,
                    contentType: false,    //不可缺
                    processData: false,    //不可缺
                    crossDomain: true,
                    xhrFields: {withCredentials: true},
                    dataType:  'json',
                    beforeSend: function(){
                    },
                    xhr: function(){ //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
                        myXhr = $.ajaxSettings.xhr();
                        if(myXhr.upload){ //检查upload属性是否存在
                        //绑定progress事件的回调函数
                        myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
                        }
                        return myXhr; //xhr对象返回给jQuery使用
                        },
                    success: function(res) {
                        if (res.code == 200) {
                            layer.msg('上传成功', {icon :1});
                            setTimeout(function(){
                                location.reload();
                            },1000);
                        }else{
                            layer.msg(res.msg, {icon: 2});
                        }
                    },
                });
            });
            //上传进度回调函数：
            function progressHandlingFunction(e) {

                if (e.lengthComputable) {
                    $('progress').attr({value : e.loaded, max : e.total}); //更新数据到进度条
                    var percent = e.loaded/e.total*100;
                    $('#progress').html(((e.loaded/1024)/1024).toFixed(2) + "/" + ((e.total/1024)/1024).toFixed(2)+" MB. " + percent.toFixed(2) + "%");
                }
            }