WebUploader+SpringMVC实现文件上传功能

WebUploader是由Baidu团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥html5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, Android 4+。两套运行时，同样的调用方式，可供用户任意选用。采用大文件分片并发上传，极大的提高了文件上传效率。

官方文档及更多示例请参考： http://fex.baidu.com/webuploader/

不扯废话了，由于我需要的只是上传图片功能，官网上边还说“WebUploader只包含文件上传的底层实现，不包括UI部分，所以交互方面可以自由发挥。”但是我又看到官网的例子不错，就把demo的js和css扒了下来.

前台相关代码：

jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>












uploadTest


 
  
   Demo
   您可以尝试文件拖拽，使用QQ截屏工具，然后激活窗口后粘贴，或者点击添加图片按钮，来体验此demo.
   
    
     
      
      或将照片拖到这里，单次最多可选300张
     
    
    
     
      0% 
     
     
     
      
      开始上传

uploader_demo.js

jQuery(function() {
 var $ = jQuery, // just in case. Make sure it's not an other libaray.
  $wrap = $('#uploader'),  // 图片容器
  $queue = $('')
   .appendTo( $wrap.find('.queueList') ),  // 状态栏，包括进度和控制按钮
  $statusBa $wrap.find('.statusBar'),
  // 文件总体选择信息。
  $info = $statusBar.find('.info'),
  // 上传按钮
  $upload = $wrap.find('.uploadBtn'),
  // 没选择文件之前的内容。
  $placeHolder = $wrap.find('.placeholder'),
  // 总体进度条
  $progress = $statusBar.find('.progress').hide(),
  // 添加的文件数量
  fileCount = 0,
  // 添加的文件总大小
  fileSize = 0,
  // 优化retina, 在retina下这个值是2
  ratio = window.devicePixelRatio || 1,
  // 缩略图大小
  thumbnailWidth = 110 * ratio,
  thumbnailHeight = 110 * ratio,
  // 可能有pedding, ready, uploading, /confirm/i, done.
  state = 'pedding',
  // 所有文件的进度信息，key为file id
  percentages = {},
  supportTransition = (function(){
   var s = document.createElement('p').style,
    r = 'transition' in s ||
      'WebkitTransition' in s ||
      'MozTransition' in s ||
      'msTransition' in s ||
      'OTransition' in s;
   s = null;
   return r;
  })(),
  // WebUploader实例
  uploader;
 if ( !WebUploader.Uploader.support() ) {
  alert( 'Web Uploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器');
  throw new Error( 'WebUploader does not support the browser you are using.' );
 }
 // 实例化
 uploader = WebUploader.create({
  pick: {
   id: '#filePicker',
   label: '点击选择图片'
  },
  dnd: '#uploader .queueList',
  paste: document.body,
  accept: {
   title: 'Images',
   extensions: 'gif,jpg,jpeg,bmp,png',
   mimeTypes: 'image
 clip: rect(1px,1px,1px,1px);
}
#uploader .placeholder {
 min-height: 350px;
 padding-top: 178px;
 text-align: center;
 background: url(../images/image.png) center 93px no-repeat;
 color: #cccccc;
 font-size: 18px;
 position: relative;
}
#uploader .placeholder .webuploader-pick {
 font-size: 18px;
 background: #00b7ee;
 border-radius: 3px;
 line-height: 44px;
 padding: 0 30px;
 *width: 120px;
 color: #fff;
 display: inline-block;
 margin: 0 auto 20px auto;
 cursor: pointer;
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#uploader .placeholder .webuploader-pick-hover {
 background: #00a2d4;
}
#uploader .placeholder .flashTip {
 color: #666666;
 font-size: 12px;
 position: absolute;
 width: 100%;
 text-align: center;
 bottom: 20px;
}
#uploader .placeholder .flashTip a {
 color: #0785d1;
 text-decoration: none;
}
#uploader .placeholder .flashTip a:hover {
 text-decoration: underline;
}
#uploader .filelist {
 list-style: none;
 margin: 0;
 padding: 0;
}
#uploader .filelist:after {
 content: '';
 display: block;
 width: 0;
 height: 0;
 overflow: hidden;
 clear: both;
}
#uploader .filelist li {
 width: 110px;
 height: 110px;
 background: url(../images/bg.png) no-repeat;
 text-align: center;
 margin: 0 8px 20px 0;
 position: relative;
 display: inline;
 float: left;
 overflow: hidden;
 font-size: 12px;
}
#uploader .filelist li p.log {
 position: relative;
 top: -45px;
}
#uploader .filelist li p.title {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 overflow: hidden;
 white-space: nowrap;
 text-overflow : ellipsis;
 top: 5px;
 text-indent: 5px;
 text-align: left;
}
#uploader .filelist li p.progress {
 position: absolute;
 width: 100%;
 bottom: 0;
 left: 0;
 height: 8px;
 overflow: hidden;
 z-index: 50;
 margin: 0;
 border-radius: 0;
 background: none;
 -webkit-box-shadow: 0 0 0;
}
#uploader .filelist li p.progress span {
 display: none;
 overflow: hidden;
 width: 0;
 height: 100%;
 background: #1483d8 url(../images/progress.png) repeat-x;
 -webit-transition: width 200ms linear;
 -moz-transition: width 200ms linear;
 -o-transition: width 200ms linear;
 -ms-transition: width 200ms linear;
 transition: width 200ms linear;
 -webkit-animation: progressmove 2s linear infinite;
 -moz-animation: progressmove 2s linear infinite;
 -o-animation: progressmove 2s linear infinite;
 -ms-animation: progressmove 2s linear infinite;
 animation: progressmove 2s linear infinite;
 -webkit-transform: translateZ(0);
}
@-webkit-keyframes progressmove {
 0% {
  background-position: 0 0;
 }
 100% {
  background-position: 17px 0;
 }
}
@-moz-keyframes progressmove {
 0% {
  background-position: 0 0;
 }
 100% {
  background-position: 17px 0;
 }
}
@keyframes progressmove {
 0% {
  background-position: 0 0;
 }
 100% {
  background-position: 17px 0;
 }
}
#uploader .filelist li p.imgWrap {
 position: relative;
 z-index: 2;
 line-height: 110px;
 vertical-align: middle;
 overflow: hidden;
 width: 110px;
 height: 110px;
 -webkit-transform-origin: 50% 50%;
 -moz-transform-origin: 50% 50%;
 -o-transform-origin: 50% 50%;
 -ms-transform-origin: 50% 50%;
 transform-origin: 50% 50%;
 -webit-transition: 200ms ease-out;
 -moz-transition: 200ms ease-out;
 -o-transition: 200ms ease-out;
 -ms-transition: 200ms ease-out;
 transition: 200ms ease-out;
}
#uploader .filelist li img {
 width: 100%;
}
#uploader .filelist li p.error {
 background: #f43838;
 color: #fff;
 position: absolute;
 bottom: 0;
 left: 0;
 height: 28px;
 line-height: 28px;
 width: 100%;
 z-index: 100;
}
#uploader .filelist li .success {
 display: block;
 position: absolute;
 left: 0;
 bottom: 0;
 height: 40px;
 width: 100%;
 z-index: 200;
 background: url(../images/success.png) no-repeat right bottom;
}
#uploader .filelist div.file-panel {
 position: absolute;
 height: 0;
 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80000000', endColorstr='#80000000');
 background: rgba( 0, 0, 0, 0.5 );
 width: 100%;
 top: 0;
 left: 0;
 overflow: hidden;
 z-index: 300;
}
#uploader .filelist div.file-panel span {
 width: 24px;
 height: 24px;
 display: inline;
 float: right;
 text-indent: -9999px;
 overflow: hidden;
 background: url(../../img/uploader_icons.png) no-repeat;
 margin: 5px 1px 1px;
 cursor: pointer; 
}
#uploader .filelist div.file-panel span.rotateLeft {
 background-position: 0 -24px;
}
#uploader .filelist div.file-panel span.rotateLeft:hover {
 background-position: 0 0;
}
#uploader .filelist div.file-panel span.rotateRight {
 background-position: -24px -24px;
}
#uploader .filelist div.file-panel span.rotateRight:hover {
 background-position: -24px 0;
}
#uploader .filelist div.file-panel span.cancel {
 background-position: -48px -24px;
}
#uploader .filelist div.file-panel span.cancel:hover {
 background-position: -48px 0;
}
#uploader .statusBar {
 height: 63px;
 border-top: 1px solid #dadada;
 padding: 0 20px;
 line-height: 63px;
 vertical-align: middle;
 position: relative;
}
#uploader .statusBar .progress {
 border: 1px solid #1483d8;
 width: 198px;
 background: #fff;
 height: 18px;
 position: relative;
 display: inline-block;
 text-align: center;
 line-height: 20px;
 color: #6dbfff;
 position: relative;
 margin: 0 10px 0 0;
}
#uploader .statusBar .progress span.percentage {
 width: 0;
 height: 100%;
 left: 0;
 top: 0;
 background: #1483d8;
 position: absolute;
}
#uploader .statusBar .progress span.text {
 position: relative;
 z-index: 10;
}
#uploader .statusBar .info {
 display: inline-block;
 font-size: 14px;
 color: #666666;
}
#uploader .statusBar .btns {
 position: absolute;
 top: 10px;
 right: 20px;
 line-height: 40px;
}
#filePicker2 {
 display: inline-block;
 float: left;
}
#uploader .statusBar .btns .webuploader-pick,
#uploader .statusBar .btns .uploadBtn,
#uploader .statusBar .btns .uploadBtn.state-uploading,
#uploader .statusBar .btns .uploadBtn.state-paused {
 background: #ffffff;
 border: 1px solid #cfcfcf;
 color: #565656;
 padding: 0 18px;
 display: inline-block;
 border-radius: 3px;
 margin-left: 10px;
 cursor: pointer;
 font-size: 14px;
 float: left;
}
#uploader .statusBar .btns .webuploader-pick-hover,
#uploader .statusBar .btns .uploadBtn:hover,
#uploader .statusBar .btns .uploadBtn.state-uploading:hover,
#uploader .statusBar .btns .uploadBtn.state-paused:hover {
 background: #f0f0f0;
}
#uploader .statusBar .btns .uploadBtn {
 background: #00b7ee;
 color: #fff;
 border-color: transparent;
}
#uploader .statusBar .btns .uploadBtn:hover {
 background: #00a2d4;
}
#uploader .statusBar .btns .uploadBtn.disabled {
 pointer-events: none;
 opacity: 0.6;
}

后台代码：

@Controller
@RequestMapping("/upload")
public class UpLoaderTestController {
 @RequestMapping(params = "method=uploadPic")
 public String uploadPic(HttpServletRequest request){
  return "uploaderDemo/uploaderTest";
 }
 @RequestMapping(params="method=upload")
 @ResponseBody
 public String uploads(@RequestParam("file")MultipartFile sortPicImg,HttpServletRequest request,HttpServletResponse response) {
  String path = SysConstants.PIC_SERVER_FILE_ROOT_DIR +SysConstants.PIC_PTYPE_DIR ;
  String fileName = System.currentTimeMillis()+"_"+sortPicImg.getOriginalFilename();
  File targetFile = new File(path, fileName);
  if (!targetFile.exists()) {
   targetFile.mkdirs();
  }
  JSonObject json = new JSonObject();
  //保存
  try {
   sortPicImg.transferTo(targetFile);
  } catch (Exception e) {
   e.printStackTrace();
   json.put("msg","error");
   return json.toJSonString();
  }
  json.put("msg","success");
  //json.put("filePath",request.getContextPath() + "/upload/" + fileName);
  File retfile = new File(SysConstants.PIC_SERVER_DNS +SysConstants.PIC_PTYPE_DIR, fileName);
  json.put("filePath",retfile.getPath());
  System.out.println("json="+json.toJSonString());
  return json.toJSonString();
 }
 }

前台传到后台的图片是一张一张传的，每传一张图片调用一次该server方法，直到传完为止。

将图片文件上传到图片服务器后，再将该图片地址存储在数据库中。

WebUploader+SpringMVC实现文件上传功能

Demo 您可以尝试文件拖拽，使用QQ截屏工具，然后激活窗口后粘贴，或者点击添加图片按钮，来体验此demo. 或将照片拖到这里，单次最多可选300张 0% 开始上传

Java相关栏目本月热门文章

Demo
您可以尝试文件拖拽，使用QQ截屏工具，然后激活窗口后粘贴，或者点击添加图片按钮，来体验此demo.

或将照片拖到这里，单次最多可选300张
0% 开始上传