jquery-file-upload 文件上传带进度条效果

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 文件上传带进度条效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

您可能感兴趣的文章:

• jquery之ajaxfileupload异步上传插件(附工程代码)
• jquery uploadify和apache Fileupload实现异步上传文件示例
• 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
• jQuery插件ajaxFileUpload实现异步上传文件效果
• JQuery插件ajaxfileupload.js异步上传文件实例
• jQuery异步上传文件插件ajaxFileUpload详细介绍
• PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
• JQuery fileupload插件实现文件上传功能
• jQuery插件AjaxFileUpload实现ajax文件上传
• jQuery插件ajaxfileupload.js实现上传文件