ajax上传多个文件并显示进度条教程
程序员文章站
2022-06-04 22:54:35
ajax上传多个文件并显示进度条
<script type="text/javascript" src="jeasyui/jquery.min.js"></script><script type="text/javascript" src="jeasyui/jquery.easyui.min.js"></script><script type="text/javascript" src="jeasyui/locale/easyui-lang-zh_cn.js"></script>
<script language="javascript">
$(document).ready(function(){
//上传准备信息
$("#file").change(function(){
var file = document.getelementbyid('file');
var filenum = file.files.length;
$('.processbar').css("width",0);
//验证要上传的文件
$('#choose_button').linkbutton({text:filenum+'个文件'});
})
});
//选择上传视频
function choose_videos(){
$('#file').click();
}
//上传视频
function upload_videos(){
var formdata = new formdata($('#uploadform')[0]);
var username=$('#username').val();
var file = document.getelementbyid('file');
var filenum = file.files.length;
if(!username){
alert('未输入用户名');
return false;
}
if(filenum==0){
alert('未选择文件');
return false;
}
formdata.append("username",username);
console.log(formdata);
$.ajax({
type: 'post',
url: "agentvideomanageupload.php",
data: formdata,
cache: false,
processdata: false,
contenttype: false,
xhr:function(){//获取上传进度
myxhr = $.ajaxsettings.xhr();
if(myxhr.upload){
myxhr.upload.addeventlistener('progress',function(e){//监听progress事件
var loaded = e.loaded;//已上传
var total = e.total;//总大小
var percent = math.floor(100*loaded/total);//百分比
$('.processnum').text(percent+"%");//数显进度
$('.processbar').css("width",percent+"px");//图显进度}, false);
});
return myxhr;
}
},
success: function(data){//上传成功回调
alert(data);
location.reload();
}
})
}
//清除form
function clearform(){
$('#uploadform').form('clear');
}
</script>
ajax上传多个文件并显示进度条