jquery-file-upload 文件上传带进度条效果
程序员文章站
2022-06-25 13:28:27
jquery file upload 是一个jquery图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开...
jquery file upload 是一个jquery图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。
效果图如下所示:
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 文件上传带进度条效果,希望对大家有所帮助