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+"%"; }
———————————————————————阿纪———————————————————————-
转载于:https://www.cnblogs.com/sunjiguang/p/5399236.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/109068.html原文链接：https://javaforall.net
