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

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

创新互联建站长期为上千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为市中企业提供专业的成都网站设计、做网站，市中网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。

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

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

[图片上传失败...(image-2c700a-1548557865446)]

将上传事件绑定在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(); } });

[图片上传失败...(image-3d6ae0-1548557865446)]

[图片上传失败...(image-9f0adf-1548557865446)]

更多用法可以 参考官网

jquery-1.2.6 progressbar怎么用

JQuery Progress Bar是基于JQuery开发的进度条插件，秉承了JQuery的简约哲学。

不仅容易使用，而且可以轻松定制外观。对于使用了JQuery框架的项目来说，

需要使用进度条控件时这是一个不错的选择。

JQuery Progress Bar与常规插件一样，只要用选择器选择一个HTML元素后，

直接调用插件的公开方法即可。它提供的公开方法名称为progressBar()。

那么，当HTML页面上有一个id为progress1的元素时，可以这样初始化该控件：

$("#progress1").progressBar();

它的构造函数可以接收如下表所示的参数。方法及参数

用途

progressBar()

按默认设置初始化一个进度条

progressBar(persent)

按默认设置初始化或更新一个进度条，设置进度条的百分比至persent%.

progressBar(config)

按config中指定的设置初始化一个进度条，百分比为0%。注意不要在初始化之后使用该方法来更改进度条的设置，否则可能引起显示不正常。

progressBar(persent,config)

按config中指定的设置初始化一个进度条，百分比为persent%。注意不要在初始化之后使用该方法来更改进度条的设置，否则可能引起显示不正常。

其中，config参数是一个哈希结构对象，它包含了如下属性用于设置进度条的外观特性

属性

用途

increment

设置进度条每步的增长度。默认值为2。

speed

设置进度条初始化时动态滑动效果的速度。默认值为15。这个值越大，则滑动速度越慢。

showText

设置是否显示百分比标识文字。默认值为ture，即显示百分比文字标识。

boxImage

设置边框图片。默认值为images/progressbar.gif。如需定制边框，则修改该属性，指向要使用的图片即可。

barImage

设置进度标识图片。默认值为images/progressbg_green.gif。如需定制，则修改该属性，指向要使用的图片即可。这个图片分类两节，前半节用于标识完成进度，后半截用于标识剩余未完成进度。两节长度相等，且等于进度条的宽度。

width

设置进度条的宽度，这个值必须与barImage和boxImage所指向的图片相适应。默认值为120。

height

设置进度条的高度，这个值必须与barImage和boxImage所指向的图片相适应。默认值为12。

$(document).ready(function() {

$("#spaceused1").progressBar();

$("#spaceused2").progressBar({ barImage: 'images/progressbg_yellow.gif'} );

$("#spaceused3").progressBar({ barImage: 'images/progressbg_orange.gif', showText: false} );

$("#spaceused4").progressBar(65, { showText: false, barImage: 'images/progressbg_red.gif'} );

$("#uploadprogressbar").progressBar();

});

script type="text/javascript"

$("#loading").fadeOut()

/script

jquery中加载完进度条插件怎样跳入下一个网页

我不知道你用的是哪种插件，首先建议你去查下相应的API，一般来讲这种插件应该会提供一个对应的方法，来让你使用，如果你找不到，那就看你想要一个什么样的效果了

如果那个页面只是一个过度的页面，我觉得你完全可以在你jquery初始化的最后直接执行页面跳转，反正只是个过度页面，无所谓是不是真的加载完成，只要个人一个你走了过度页面，并且加载速度很快，我觉得这样就OK。

如果你的不是过度页面，还有一系列图片和乱七八糟的东西，那建议你用

window.onload = function() {

alert("1");

};

这个方法是你再加载完包括图片等资源以后才会调用，具体用哪一个看你页面的需求了。

用jquery实现进度条效果

二楼的方法不是常规的解决办法，个人感觉不是很好(不过他实现的加载进度是真实的，他的进度条是可以反映当前未加载页面的剩余内容的---其实这种方法也挺好....不过一般情况下没什么必要吧，如果要做成这样的，用flex更好)。

一楼的方法不是正确的。如果简单地放一个loading图片在页面上的话，会有两种情况：一、有可能实现加载的效果 。 二、在整个页面其它元素加载了大部分或全部后，这张图片才加载进来，那就实现不了加载的效果了。

常规的解决办法还是用ajax比较好。大概是这样的。

需要两个页面。1.一个是实际页面本身 2.另一个是一个空白页面放一张loading图片

先请求第2个页面，在这个页面中放一段ajax请求第1个页面，在success函数里将页面内容输出，并将loading图片隐藏掉。

代码是这样的：

loading page:

body

img id='loadingImg' src='loading.gif' /

body

script

$.ajax({

type: 'GET',

url: 实际页面路径,

data: {},

success: function(){

$('body').append(data);

$('#loadingImg').hide();//或直接remove()

},

dataType: 'html'

});

/script

==========================================================

呵呵，一个加载的问题要考虑搜索的话原来就这么麻烦了。 div id="forspider".....给搜索蜘蛛看的纯HTML..../div这里面的内容是整个实际页面的HTML吗？是的话，那这个loading页面本身加载就很笨重了，还不如直接跳到真实页面呢。 哎，可惜我不太懂搜索，悲剧。请指教----为什么要用绝对定位覆盖的方法来隐藏。直接把这一层display:none的话蜘蛛也会看不到吗？

以上回答你满意么？

jquery.color插件怎么用

使用该圆形进度条插件需要引入jQuery和jquery.classycolor.min.js和jquery.classycolor.min.css文件。

link rel="stylesheet" type="text/css" href="css/jquery.classycolor.min.css" /

script src='js/jquery.min.js'/script

script src='js/jquery.classycolor.min.js'/script

网页标题：jquery进度条插件,jquery进度条特效
转载来源：http://chengdu.cdxwcx.cn/article/dsddeds.html