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>
//這是進度條的顯示位置
<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>
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 //阻止頁面跳轉

 }
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+"%";
    }
相關文章
相關標籤/搜索