jquery-file-upload 文件上传带进度条效果


Posted in jQuery onNovember 21, 2017

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

效果图如下所示:

jquery-file-upload 文件上传带进度条效果

html 部分

<div style="line-height:34px;margin-top:20px;"> 
    <label style="float: left;font-size:14px">上传文件:</label> 
    <span class="btn btn-success fileinput-button fn-left"> 
   <i class="glyphicon glyphicon-plus"></i> 
   <span>浏览...</span> 
   <input type="file" name="file" id="file_upload"> 
  </span> 
    <div style="float: left;margin-left: 20px;font-weight: bold" id="uploadText"></div> 
    </div> 
    <div class="fn-clear"></div> 
    <div id="progress"> 
    <div class="bar" style="width: 0%;"></div> 
    </div>

css 部分

<link rel="stylesheet" href="/admin/assets/plugins/jquery-file-upload/css/jquery.fileupload-ui.css" rel="external nofollow" > 
<link rel="stylesheet" href="/admin/assets/plugins/jquery-file-upload/css/jquery.fileupload.css" rel="external nofollow" > 

/*文件上传控件*/ 
.bar { 
 background-image: -webkit-linear-gradient(top,#5cb85c 0,#449d44 100%); 
 background-image: -o-linear-gradient(top,#5cb85c 0,#449d44 100%); 
 background-image: -webkit-gradient(linear,left top,left bottom,from(#5cb85c),to(#449d44)); 
 background-image: linear-gradient(to bottom,#5cb85c 0,#449d44 100%); 
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0); 
 background-repeat: repeat-x; 
 height: 20px; 
 font-size: 12px; 
 line-height: 20px; 
 color: #fff; 
 text-align: center; 
 background-color: #428bca; 
 -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); 
 box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); 
 -webkit-transition: width .6s ease; 
 -o-transition: width .6s ease; 
 transition: width .6s ease; 
} 
#progress { 
 background-image: -webkit-linear-gradient(top,#ebebeb 0,#f5f5f5 100%); 
 background-image: -o-linear-gradient(top,#ebebeb 0,#f5f5f5 100%); 
 background-image: -webkit-gradient(linear,left top,left bottom,from(#ebebeb),to(#f5f5f5)); 
 background-image: linear-gradient(to bottom,#ebebeb 0,#f5f5f5 100%); 
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0); 
 background-repeat: repeat-x; 
 height: 20px; 
 width: 0%; 
 margin-bottom: 20px; 
 overflow: hidden; 
 background-color: #f5f5f5; 
 border-radius: 4px; 
 -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1); 
 box-shadow: inset 0 1px 2px rgba(0,0,0,.1); 
 margin-top: 20px; 
} 
.glyphicon { 
 position: relative; 
 top: 1px; 
 display: inline-block; 
 font-family: 'Glyphicons Halflings'; 
 font-style: normal; 
 font-weight: 400; 
 line-height: 1; 
 -webkit-font-smoothing: antialiased; 
 -moz-osx-font-smoothing: grayscale; 
} 
.glyphicon-plus:before { 
 content: "\2b"; 
} 
.btn-success { 
 color: #fff; 
 background-color: #5cb85c; 
 border-color: #4cae4c; 
} 
.btn { 
 display: inline-block; 
 padding: 6px 12px; 
 margin-bottom: 0; 
 font-size: 14px; 
 font-weight: 400; 
 line-height: 1.42857143; 
 text-align: center; 
 white-space: nowrap; 
 vertical-align: middle; 
 cursor: pointer; 
 -webkit-user-select: none; 
 -moz-user-select: none; 
 -ms-user-select: none; 
 user-select: none; 
 background-image: none; 
 border: 1px solid transparent; 
 border-radius: 4px; 
}

js 部分

<script src="/admin/assets/plugins/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script> 
<script src="/admin/assets/plugins/jquery-file-upload/js/jquery.fileupload.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath}/admin/assets/plugins/jquery-1.10.2.min.js"></script>
<span style="font-family:monospace;font-size:14px;"> <span id="_xhe_cursor"></span>$('#file_upload').fileupload({ 
  dataType: 'json', 
  url:'${pageContext.request.contextPath}/excel/upload', 
  autoUpload:false, 
  add: function (e, data) { 
  $('#progress').css( 
   'width','0%' 
  ); 
  $('#progress .bar').css( 
   'width', '0%' 
  ); 
  $("#uploadText").empty(); 
  var fileType = data.files[0].name.split('.').pop(); 
  // console.log(data); 
  var acceptFileTypes = /xls|xlsx$/i; 
  var size = data.files[0].size; 
  size = (size/1024).toFixed(2);//文件大小单位kb 
  var maxFileSize = 5*1024;//最大允许文件大小单位kb 
  if (!acceptFileTypes.test(fileType)) { 
   new Message({message:"不支持的文件类型,仅支持EXCEL文件"}); 
   return ; 
  } 
  if(size>maxFileSize){ 
   new Message({message:"文件大小:"+size+"KB,超过最大限制:"+maxFileSize+"KB"}); 
   return ; 
  } 
  data.context = $("<button class=' ui-button ui-button-lwhite'/>").text("上传") 
   .appendTo("#uploadText") 
   .click(function () { 
    data.context = $("<p/>").text("正在上传...").replaceAll($(this)); 
    data.submit(); 
   }); 
  }, 
  progressall: function (e, data) { 
  var progress = parseInt(data.loaded / data.total * 100, 10); 
  $('#progress').css( 
   'width','100%' 
  ); 
  $('#progress .bar').css( 
   'width',progress + '%' 
  ); 
  }, 
  fail:function (e, data) { 
  new Message({message:"上传失败"}); 
  }, 
  done: function (e, data) { 
  console.log(data.files[0]); 
  var fileName = data.files[0].name; 
  var size = data.files[0].size; 
  var obj = data.result; 
  if(obj.success == true){ 
   $("#filePath").val(obj.result.fileId+"&"+obj.result.opLogId); 
   data.context.text("文件上传已完成!文件名:"+fileName+" 文件大小:"+size+"kb"); 
  }else{ 
   alert(obj.errorMsg); 
  } 
  } 
 });</span>

XHR响应为Json时IE的下载BUG

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

解决这个问题的方法是必须将相应的Http Head从

Content-Type: application/json

更改为

Content-Type: text/

总结

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

jQuery 相关文章推荐
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jQuery实现简易QQ聊天框
Feb 10 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 #jQuery
jquery中有哪些api jQuery主要API
Nov 20 #jQuery
jquery ztree实现右键收藏功能
Nov 20 #jQuery
jQuery实现checkbox的简单操作
Nov 18 #jQuery
基于jquery实现五星好评
Nov 18 #jQuery
jQuery实现滚动效果
Nov 17 #jQuery
基于jQuery实现定位导航位置效果
Nov 15 #jQuery
You might like
php获得文件扩展名三法
2006/11/25 PHP
php中file_exists函数使用详解
2015/05/08 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
python中解析json格式文件的方法示例
2017/05/03 Python
Python实现感知机(PLA)算法
2017/12/20 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
python动态进度条的实现代码
2019/07/03 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
酒店总经理欢迎词
2014/01/15 职场文书
应届护士求职信范文
2014/01/26 职场文书
公务员转正考察材料
2014/02/07 职场文书
客户接待方案
2014/02/26 职场文书
常务副总经理任命书
2014/06/05 职场文书
mysql分表之后如何平滑上线详解
2021/11/01 MySQL