jquery进度条(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，看到的效果是这样的
[图片上传失败...(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中progressBar的进度条颜色和其背景颜色
$('#psp').css({'background':'green'});但是进度条和背景一个颜色，都是浅蓝的，能够显示当前的进步，但是不能区分进度条和背景的颜色，
我想区分进度条和北京的颜色
谁能帮助一下，谢谢。问题补充：还是不行，进度条和背景仍旧一个颜色。问题补充：可能我的问题还不是太明白，我把代码贴出来<br/><br/><div id="psp" class="easyui-progressbar" style="width:630px;"</div<br/><br/>function text(result){<br/>$('#psp div').css({'background':'LightBlue'});<br/>$('#psp').css({'background':'green'});<br/> var value=$('#psp').progressbar('getValue');<br/> if(value< 100){<br/> value+= Math.floor(Math.random()* 10);<br/>$('#psp').progressbar('setValue', value);<br/> if(value<100){<br/> setTimeout("text('"+result+"')",200);<br/>}<br/>}<br/><br/><br/>目前就是想把进度条和背景的颜色分开，但是这两个颜色一直是一样的，不知道我的代码是否由问题，请大家指正。问题补充：<div class="quote_title">housen1987写道</div><div class="quote_div">你看一下我给的效果图，是不是这个样子的，关键是<div id='psp' style='padding:2px;'这句话<br/></div><br/>------------------<br/><br/>问题补充：<div class="quote_title">housen1987写道</div><div class="quote_div">现在才看明白了，你用的jquery UI<br/><br/><pre name="code" class="java"><style
.ui-progressbar{
background: green;
padding:1px;}
.ui-progressbar-value{
background: LightBlue;}</style<script type="text/javascript"
$(function(){
</body</pre><br/><br/>按这个代码试试，jquery UI改变样式一般用CSS修改：<br/><br/>官方文档：<br/><div class="quote_title">引用</div><div class="quote_div">Sample markup with jQuery UI CSS Framework classes<br/><div class="ui-progressbar ui-widget ui-widget-content ui-corner-all"<br/><div style="width: 37%;" class="ui-progressbar-value ui-widget-header ui-corner-left"</div<br/></div<br/>Note: This is a sample of markup generated by the progressbar plugin, not markup you should use to create a progressbar. The only markup needed for that is<div</div.</div><br/></div><br/>-----------------<br/>style完全不起作用。