码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-04-16 21:28:36      阅读:257      评论:0      收藏:0      [点我收藏+]

标签:

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

 

 

这是自己学习过程中的记录,方便自己回顾,好记性不如烂笔头

作者:艺至

 

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

标签:

原文地址:http://www.cnblogs.com/sunjiguang/p/5399236.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!