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插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
jquery插件实现搜索历史
Apr 24 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获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
PHP中16个高危函数整理
2019/09/19 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
jscript之List Excel Color Values
2007/06/13 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
javascript每日必学之继承
2016/02/23 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
Vue组件化开发思考
2018/02/02 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
python抓取网页图片示例(python爬虫)
2014/04/27 Python
详解Python中expandtabs()方法的使用
2015/05/18 Python
Ubuntu下安装PyV8
2016/03/13 Python
Python数据存储之 h5py详解
2019/12/26 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
Python 如何测试文件是否存在
2020/07/31 Python
Python无损压缩图片的示例代码
2020/08/06 Python
python实现发送邮件
2021/03/02 Python
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
三爱活动实施方案
2014/03/19 职场文书
2014年保洁工作总结
2014/11/24 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
民事调解协议书
2016/03/21 职场文书
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技