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中封装函数传递当前元素的方法示例
May 05 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
如何在vue 中引入使用jquery
Nov 10 jQuery
jQuery实现容器间的元素拖拽功能
Dec 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 has encountered an Access Violation
2007/01/15 PHP
PHP中常用数组处理方法实例分析
2008/08/30 PHP
php中Snoopy类用法实例
2015/06/19 PHP
php微信开发接入
2016/08/27 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
Tornado 多进程实现分析详解
2018/01/12 Python
python文本数据相似度的度量
2018/03/12 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
python numpy格式化打印的实例
2018/05/14 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
python实现五子棋小游戏
2020/03/25 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
python3 kubernetes api的使用示例
2021/01/12 Python
数据库测试通常都包括哪些方面
2015/11/30 面试题
创业计划书的写作技巧及要点
2014/01/31 职场文书
采购经理岗位职责
2014/02/16 职场文书
卖房协议书样本
2014/10/30 职场文书
党员年终个人总结
2015/02/14 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB