快速掌握jQuery插件WebUploader文件上传

var $li = $( '#'+file.id ),
$percent = $li.find('.progress span');

// 避免重复创建
if ( !$percent.length ) {
$percent = $('<p class="progress"><span></span></p>')
.appendTo( $li )
.find('span');
}

$percent.css( 'width', percentage * 100 + '%' );
});

// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on( 'uploadSuccess', function( file ) {
$( '#'+file.id ).addClass('upload-state-done');
});

// 文件上传失败，显示上传出错。
uploader.on( 'uploadError', function( file ) {
var $li = $( '#'+file.id ),
$error = $li.find('div.error');

// 避免重复创建
if ( !$error.length ) {
$error = $('<div class="error"></div>').appendTo( $li );
}

$error.text('上传失败');
});

小案例：webuploader使用java如何实现上传？

Html代码 

<div id="uploader" class="wu-example">
  <div class="queueList">
   <div id="dndArea" class="placeholder">
   <div id="filePicker"></div>
   <p>或将照片拖到这里，单次最多可选300张</p>
   </div>
  </div>
  <div class="statusBar" style="display: none;">
   <div class="progress">
   <span class="text">0%</span> <span class="percentage"></span>
   </div>
   <div class="info"></div>
   <div class="btns">
   <div id="filePicker2"></div>
   <div class="uploadBtn">开始上传</div>
   </div>
  </div>
  </div> 
<!-- webuploader -->
<link rel="stylesheet" type="text/css"
 href="/static/js/webuploader/css.css">
<link rel="stylesheet" type="text/css"
 href="/static/js/webuploader/image.css">
<script type="text/javascript" src="/static/js/webuploader/min.js"></script>
<script type="text/javascript"
 src="/static/js/webuploader/upload-image.js"></script> 

js代码 

// 实例化
 uploader = WebUploader.create({
 pick: {
 id: '#filePicker',
 label: '点击选择图片'
 },
 dnd: '#uploader .queueList',
 paste: document.body,
 accept: {
 title: 'Images',
 extensions: 'gif,jpg,jpeg,bmp,png',
 mimeTypes: 'image/*'
 },
 // swf文件路径
 [color=red]swf: '/static/js/webuploader/Uploader.swf',[/color] disableGlobalDnd: true,
 chunked: true,
 server: '/point/image/bulk.html',
 fileNumLimit: 300,
 fileSizeLimit: 50*1024*1024,//5M
 fileSingleSizeLimit: 5*1024*1024 //1M
 }); 

上传文件和普通的spring一样

Java代码 

								 
 4/5   首页 上一页 2 3 4 5 下一页 尾页