jquery 下载进度条（使用jquery.form.js实现文件上传及进度条前端代码）

：暂无数据 2026-10-04 21:50:09 ：2

大家好，jquery 下载进度条相信很多的网友都不是很明白，包括使用jquery.form.js实现文件上传及进度条前端代码也是一样，不过没有关系，接下来就来为大家分享关于jquery 下载进度条和使用jquery.form.js实现文件上传及进度条前端代码的一些知识点，大家可以关注收藏，免得下次来找不到哦，下面我们开始吧！

本文目录

使用jquery.form.js实现文件上传及进度条前端代码
用jquery怎么实现上传进度条的问题
用jQuery或者javascript怎么实现圆形进度条
jquery 投票进度条怎么算

使用jquery.form.js实现文件上传及进度条前端代码

ajax的表单提交只能提交data数据到后台，没法实现file文件的上传还有展示进度功能，这里用到form.js的插件来实现，搭配css样式简单易上手，而且高大上，推荐使用。

需要解释下我的结构， #upload-input-file 的input标签是真实的文件上传按钮，包裹form标签后可以实现上传功能， #upload-input-btn 的button标签是展示给用户的按钮，因为需要样式的美化。上传完成生成的文件名将会显示在 .upload-file-result 里面， .progress 是进度条的位置，先让他隐藏加上 hidden 的class， .progress-bar 是进度条的主体， .progress-bar-status 是进度条的文本提醒。

去掉hidden的class，看到的效果是这样的

将上传事件绑定在file的input里面，绑定方式就随意了。
var progress = $(".progress-bar"), status = $(".progress-bar-status"), percentVal = ’0%’; //上传步骤 $("#myupload").ajaxSubmit({ url: uploadUrl, type: "POST", dataType: ’json’, beforeSend: function () { $(".progress").removeClass("hidden"); progress.width(percentVal); status.html(percentVal); }, uploadProgress: function (event, position, total, percentComplete) { percentVal = percentComplete + ’%’; progress.width(percentVal); status.html(percentVal); console.log(percentVal, position, total); }, success: function (result) { percentVal = ’100%’; progress.width(percentVal); status.html(percentVal); //获取上传文件信息 uploadFileResult.push(result); // console.log(uploadFileResult); $(".upload-file-result").html(result.name); $("#upload-input-file").val(’’); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown); $(".upload-file-result").empty(); } });

更多用法可以参考官网

用jquery怎么实现上传进度条的问题

当然,因为插件里面自己做了其他设置,你只需要给一个层的一个ID.
然后progressBar()即可.
这是默认的属性
{
steps: 20,
stepDuration: 20,
max: 100,
showText: true,
textFormat: ’percentage’,
width: 120,
height: 12,
callback: null,
boxImage: ’images/progressbar.gif’,
barImage: {
0: ’images/progressbg_red.gif’,
30: ’images/progressbg_orange.gif’,
70: ’images/progressbg_green.gif’
},
};
都有DEMO的,你可以下载个插件里面有告诉你怎么办的解决办法.
var progress_key = ’4f9678256eb2c’;

// this sets up the progress bar
$(document).ready(function() {
$("#uploadprogressbar").progressBar();
});

// fades in the progress bar and starts polling the upload progress after 1.5seconds
function beginUpload() {
// uses ajax to poll the uploadprogress.php page with the id
// deserializes the json string, and computes the percentage (integer)
// update the jQuery progress bar
// sets a timer for the next poll in 750ms
$("#uploadprogressbar").fadeIn();

var i = setInterval(function() {
$.getJSON("demo.php?id=" + progress_key, function(data) {
if (data == null) {
clearInterval(i);
location.reload(true);
return;
}

var percentage = Math.floor(100 * parseInt(data.bytes_uploaded) / parseInt(data.bytes_total));
$("#uploadprogressbar").progressBar(percentage);
});
}, 1500);
}