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 相关文章推荐
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
详解jQuery中的prop()使用方法
Jan 05 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中ob_start()函数的用法
2013/06/24 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
js图片实时加载提供网页打开速度
2014/09/11 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
python赋值操作方法分享
2013/03/23 Python
Python中文竖排显示的方法
2015/07/28 Python
Python使用gensim计算文档相似性
2016/04/10 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
python导入坐标点的具体操作
2019/05/10 Python
python解析xml简单示例
2019/06/21 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
什么是反射
2012/03/17 面试题
内部类的定义、种类以及优点
2013/10/16 面试题
好人好事事迹材料
2014/02/12 职场文书
人事文员岗位职责
2014/02/16 职场文书
学习十八大的心得体会
2014/09/12 职场文书
镇班子对照检查材料思想汇报
2014/09/24 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
投标邀请书范本
2015/02/02 职场文书
教师思想工作总结2015
2015/05/13 职场文书
2015最新婚礼主持词
2015/06/30 职场文书
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers