jQuery文件上传是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。

效果图如下所示：

超文本标记语言部分

div style='行高：34 px'页边距-顶部：20 px'标签样式='左侧浮动：' font-size:14px '上传文件：/label span=' BTN BTN-成功文件输入-按钮fn-left ' I span=' glyphicon-plus '/I span浏览./span输入类型=' file ' name=' file ' id=' file _ upload '/span div style=' float : left；左边距left : 20pxfont-weight : bold ' id=' uploadText '/div/div class=' fn-clear '/div div id=' progress ' div class=' bar ' style=' width : 0%；'/div /div css部分

链接rel='样式表href='/admin/assets/plugins/jquery-file-upload/CSS/jquery。文件上传-ui。CSS ' rel='外部nofollow' link rel='样式表href='/admin/assets/plugins/jquery-file-upload/CSS。文件上传。CSS ' rel='外部nofollow' /*文件上传控件*/.bar { background-image :-web套件-线性-渐变(顶部，#5cb85c 0，# 449d 44 100%)；背景-图像：-o-线性-渐变（顶部，#5cb85c 0，# 449d 44 100%)；背景图像：-网络套件-渐变(线性、左上、左下，从(#5cb85c)到(# 449d 44))；背景-图像：线性-渐变（到底部，#5cb85c 0，# 449d 44 100%)；过滤器： progid : maximagettransform .微软。渐变(StartColorstr=' # ff 5cb 85 c '，endColorstr='#ff449d44 '，GradientType=0)；背景-重复：次重复-x；height : 20px font-size : 12px；线高： 20pxcolor: # fff文本对齐：中心；背景色： # 428 BCA；-web套件-box-shadow :插图0-1px 0 rgba(0，0，0，15);盒子阴影：插图0 -1px 0 rgba(0，0，0，15);-网络套件-transit :宽度。6s简易运输：宽度。6s轻松宽度为6s的过渡：} #进度{ background-image :-web kit-linear-gradient(顶部，# ebeb 0，# F5 F5 100%)；背景-图像：-o-线性-渐变（顶部，# ebeb 0，# F5 F5 f 5 100%)；背景图像：-网络套件-渐变(线性，左上，左下，从(# ebeb)到(# F5 F5 F5))；背景-图像：线性-渐变（到底部，# ebeb 0，# F5 F5 f 5 100%)；过滤器： progid : maximagettransform .微软。渐变(StartColorStr=' # FFE beeb '，endColorstr=' # fff5f5f5 '，GradientType=0)；背景-重复：次重复-x；高度： 20像素宽度： 0%;边距-底部： 20px飞越：隐藏；背景-color : # F5 F5；边界半径： 4px-web套件-box-shadow :插图0 1px 2px rgba(0，0，0，1);箱形阴影：插图0 1px 2px rgba(0，0，0，1);边距-top : 20px；} .磷脂{ position : relative to p : 1 pxdisplay :内联块；font-family: "半身人的雕刻";字体样式：正常；字体粗细： 400；线高： 1;-网络套件-字体-流畅：抗锯齿；-moz-OSX-字体-平滑：灰度；} .{ content: '2b '之前的glyphicon-plus :} .BTN-成功{ color : # fff背景-颜色： # 5cb 85 c；边框颜色： # 4 ca e4c} .btn {显示：内联块；padding: 6px 12px保证金-底部： 0;font-size : 14px字体粗细： 400；线高： 1.42857143;文本对齐：中心；空白： nowrap垂直对齐： 中间；光标：指针；-网络工具包-用户-选择：无；蚊子用户-选择：无；-ms-用户-选择：无；用户选择：无；背景-图像：无；border: 1px固体透明；边界半径： 4px} js部分

脚本src=' http :/admin/assets/plugins/jquery-file-upload/js/vendor/jquery。ui。小部件。js /脚本脚本src=' http :/admin/assets/plugins/jquery-file-upload/js/' font-size :14 px；span id=' _ xhe _ cursor '/span $(' # file _ upload ').fileupload({ dataType: 'json '，URL : ' $ { page context。请求。上下文路径}/excel/upload '，autoUpload:false，add:函数(e，数据){ $('#progress ').css('width '，' 0% ')；$(' #进度。条')。css('width '，' 0% ')；$('#uploadText ').empty()；var fileType=数据。文件[0]。名字。拆分('。').pop()；//console.log(数据);var accept filetypes=/xls | xlsx $/I；var size=data.files[0].大小；size=(size/1024).toFixed(2)；//文件大小单位kb var maxFileSize=5 * 1024//最大允许文件大小单位kb if(！接受文件类型。测试(文件类型)){ 0新消息({消息： }不支持的文件类型，仅支持超过文件'});返回；} if(SizeMaxFileSize){ 0新消息({ message : }文件大小："大小"千字节，超过最大限制：' maxFileSize ' KB ' })；返回；}数据。context=$(' button class=' ui-button ui-button-lwhite '/').文本('上传') .附录(' # uploadText ').单击(function(){ data。上下文=$(' p/').文本('正在上传.').全部替换($(this))；数据。submit()；});}，progressall:函数(e，数据){ var progress=parsent(数据。已加载/数据。合计* 100，10)；$('#progress ').css('width '，' 100% ')；$(' #进度。条')。css('width '，progress ' % ')；},失败：函数(e ),数据){新消息({ message : }上传失败'});}，done:函数(e，数据){控制台。日志(数据。文件[0])；var fileName=data.files[0].姓名；var size=data.files[0].大小；var obj=data.resultif(obj。success==true){ $(' # filePath ').瓦尔。结果。file id“”obj。结果。oplogid)；data.context.text('文件上传已完成！文件名：" fileName "文件大小：' size ' kb} else { alert(obj。错误消息)；} } });/span XHR响应为Json时工业管理学(工业工程)的下载病菌

这里需要特别注意的是，由于jQuery文件上传都是采用XHR在传递数据，服务器端返回的通常是JSON格式的响应，但是工业管理学(工业工程)会将这些JSON响应误认为是文件传输，然后直接弹出下载框询问是否需要下载。

解决这个问题的方法是必须将相应的超文本传送协议（Hyper Text Transport Protocol的缩写）头从

内容类型：应用程序/json更改为

内容-类型：文本/总结

以上所述是小编给大家介绍的jquery-文件-上传文件上传带进度条效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！