ajaxSubmit() 上傳文件和進度條顯示

時間 2019-11-12

原文原文鏈接

1. 首先引用js文件javascript

<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 表單java

//這是進度條的顯示位置
<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提交jquery

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. 偵查當前文件上傳狀況ajax

    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+"%";
    }