好资源导航 » 文章资讯 » jquery实现上传文件进度条

jquery实现上传文件进度条

2023-07-28 02:47:05 70

本文实例为大家分享了jquery实现上传文件进度条的具体代码，供大家参考，具体内容如下

首先引入需要的js css

用bootstrap进度条

前端页面

0%


$(function(){
$("#uplodsss").click(function(){
debugger
$('#uploadFile').ajaxSubmit({
type:'post',
url:"uploadFile",
processData:false,//需设置为false,因为data值是FormData对象，不需要对数据做处理
contentType:false,//需设置为false,因为是FormData对象，且已经声明了属性enctype="multipart/form-data"
resetForm:true,//成功提交后，是否重置所有表单元素的值
uploadProgress:function(event,position,total,percentComplete){
if(percentComplete>100){
percentComplete=100;
}
varpercentVal=percentComplete+'%';
$("#uploadFile_rate").html(percentVal);//文件上传进度显示值
$("#uploadFile_progressBar").width(percentVal);//进度条状态

},
success:function(data){
alert("上传文件成功！");
$("#uploadFile_progressBar").width("0px");//进度条状态
$("#uploadFile_rate").html("0%");
},
error:function(){
alert("上传文件失败，请重试！");
}
});
});
})

需要jquery.form.js，下载地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

jquery实现上传文件进度条

热门推荐

随机推荐