13518219792
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 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
我不知道你用的是哪种插件，首先建议你去查下相应的API，一般来讲这种插件应该会提供一个对应的方法，来让你使用，如果你找不到，那就看你想要一个什么样的效果了
如果那个页面只是一个过度的页面，我觉得你完全可以在你jquery初始化的最后直接执行页面跳转，反正只是个过度页面，无所谓是不是真的加载完成，只要个人一个你走了过度页面，并且加载速度很快，我觉得这样就OK。
如果你的不是过度页面，还有一系列图片和乱七八糟的东西，那建议你用
window.onload = function() {
alert("1");
};
这个方法是你再加载完包括图片等资源以后才会调用，具体用哪一个看你页面的需求了。
二楼的方法不是常规的解决办法，个人感觉不是很好(不过他实现的加载进度是真实的，他的进度条是可以反映当前未加载页面的剩余内容的---其实这种方法也挺好....不过一般情况下没什么必要吧，如果要做成这样的，用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和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
