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插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
使用 jQuery 实现表单验证功能
Jul 05 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jQuery实现简单QQ聊天框
Aug 27 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目录操作函数之获取目录与文件的类型
2010/12/29 PHP
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
javascript innerText和innerHtml应用
2010/01/28 Javascript
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
js实现一个简易计算器
2020/03/30 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
线程和进程的区别及Python代码实例
2015/02/04 Python
简单介绍Python中的decode()方法的使用
2015/05/18 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
django用户登录和注销的实现方法
2018/07/16 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
Python求解正态分布置信区间教程
2019/11/20 Python
python 读取二进制 显示图片案例
2020/04/24 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
美丽的现代设计家具:2Modern
2018/07/26 全球购物
RealTek面试题
2016/06/28 面试题
还款承诺书范文
2014/05/20 职场文书
交通工程专业推荐信
2014/09/06 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
mysql 子查询的使用
2022/04/28 MySQL
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电