这次给大家带来怎样实现文件上传带进度条动画，实现文件上传带进度条动画的注意事项有哪些，下面就是实战案例，一起来看一下。
jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。
效果图如下所示：
html 部分
登录后复制
css 部分
/*文件上传控件*/ .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: "b"; } .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 部分
登录后复制
$('#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 = $("登录后复制
XHR响应为Json时IE的下载BUG
这里需要特别注意的是，由于jQuery File Upload都是采用XHR在传递数据，服务器端返回的通常是JSON格式的响应，但是IE会将这些JSON响应误认为是文件传输，然后直接弹出下载框询问是否需要下载。
解决这个问题的方法是必须将相应的Http Head从
Content-Type: application/json
登录后复制
更改为
Content-Type: text/
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
怎样用jQuery验证表单密码的一致性
怎么发掘空白处隐藏元素
无new构建详解
jQuery实现下拉菜单导航
以上就是怎样实现文件上传带进度条动画的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2782293.html
