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

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

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