ajaxSubmit() 上传文件和进度条显示

全栈程序员-站长 • 2021年9月14日上午8:00 • 未分类 • 阅读 91

1. 首先引用js文件

<script type="text/javascript" src="/js/jquery/jquery.form.js"></script>   //ajaxForm 依赖脚本
<script type="text/javascript" src="/js/jquery/jquery-1.8.0.min.js"></script>

2. form 表单

//这是进度条的显示位置
<div class="progress" id="progressHide">
                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60"
                                 aria-valuemin="0" aria-valuemax="100" style="width: 0%;" id="progressBar">
                                <span class="sr-only">40% 完成</span>
                            </div>
                        </div>
//这是form表单
<form class="form-horizontal" id="uploadTaskForm" action="uploadTask" enctype="multipart/form-data" method="post">

    <input type="file" name="taskFile"  class="form-control"  id="taskFile"/>

    <button type="button" class="btn btn-default" onclick="saveTask()">上传 </button>

</form>

3. ajax提交

function saveTask() {
    
var options = {
    
//提交表单之前做的验证
            beforeSubmit:function(){
               var taskFile =  $("#taskFile").val();
                if(taskFile==null || taskFile==''){
    
                    return false   //表示不可以提交表单
                }else{
    
                    return true    //可以提交表单
                }

            },
//服务器返回结果处理
            success:function(data){
                 //......
            },
//进度条的监听器
            xhr: function(){
                var xhr = $.ajaxSettings.xhr();
                if(onprogress && xhr.upload) {
                    xhr.upload.addEventListener("progress" , onprogress, false);
                    return xhr;
                }
            }

        }

//提交表单（uploadTaskForm --->表单的ID） 
     $("#uploadTaskForm").ajaxSubmit(options); return false //阻止页面跳转

 }

4. 侦查当前文件上传情况

    function onprogress(evt){
        //侦查附件上传情况
        //通过事件对象侦查
        //该匿名函数表达式大概0.05-0.1秒执行一次
       // console.log(evt.loaded);  //已经上传大小情况
        //evt.total; 附件总大小
        var loaded = evt.loaded;
        var tot = evt.total;
        var per = Math.floor(100*loaded/tot);  //已经上传的百分比
        var son =  document.getElementById('progressBar');
        son.innerHTML = per+"%";
        son.style.width=per+"%";
    }