利用 webuploader 上传图片 失败 后台 报错信息如下
org.springframework.web.multipart.MultipartException: The current request is not a multipart request
at org.springframework.web.method.annotation.RequestParamMethodArgumentResolver.assertIsMultipartRequest(RequestParamMethodArgumentResolver.java:216)
at org.springframework.web.method.annotation.RequestParamMethodArgumentResolver.resolveName(RequestParamMethodArgumentResolver.java:167)
at org.springframework.web.method.annotation.AbstractNamedValueMethodArgumentResolver.resolveArgument(AbstractNamedValueMethodArgumentResolver.java:90)
at org.springframework.web.method.support.HandlerMethodArgumentResolverComposite.resolveArgument(HandlerMethodArgumentResolverComposite.java:78)
at org.springframework.web.method.support.InvocableHandlerMethod.getMethodArgumentValues(InvocableHandlerMethod.java:162)
at org.springframework.web.method.support.InvocableHandlerMethod.invokeForRequest(InvocableHandlerMethod.java:129)
at org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod.invokeAndHandle(ServletInvocableHandlerMethod.java:110)
at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.invokeHandlerMethod(RequestMappingHandlerAdapter.java:806)
at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.handleInternal(RequestMappingHandlerAdapter.java:729)
at org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter.handle(AbstractHandlerMethodAdapter.java:85)
at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:959)
at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:893)
at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:970)
at org.springframework.web.servlet.FrameworkServlet.doPost(FrameworkServlet.java:872)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:641)
at org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:846)前台页面 如下 pictureUpload.html
<!DOCTYPE html>
<html>
<head>
<!-- head begin -->
<meta charset="utf-8">
<meta name="zsc" content="pictureUpload.html" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]-->
<script type="text/javascript" src="../lib/html5.js"></script>
<script type="text/javascript" src="../lib/respond.min.js"></script>
<!--<script type="text/javascript" src="../lib/PIE_IE678.js"></script>-->
<![endif]-->
<link rel="stylesheet" type="text/css" href="../static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="../lib/Hui-iconfont/1.0.7/iconfont.css" />
<link rel="stylesheet" type="text/css" href="../lib/icheck/icheck.css" />
<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/style.css" />
<link rel="stylesheet" type="text/css" href="../lib/webuploader/0.1.5/webuploader.css">
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<![endif]-->
<!--<link href="/dmy/web/ui/css/H-ui.login.css" rel="stylesheet" type="text/css">-->
<link href="../lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css">
<link href="../lib/bootstrap-Switch/bootstrapSwitch.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../css/jquery-labelauty.css">
<![endif]-->
<title>图片上传</title>
<meta name="keywords" content="">
<meta name="description" content="">
<!-- head end -->
<link rel="stylesheet" type="text/css" href="../lib/layer/2.1/skin/layer.css" id="layui_layer_skinlayercss">
<link rel="stylesheet" type="text/css" href="../lib/My97DatePicker/skin/WdatePicker.css">
<link rel="stylesheet" type="text/css" href="../lib/layer/2.1/skin/layer.ext.css" id="layui_layer_skinlayerextcss">
<link rel="stylesheet" type="text/css" href="../lib/laypage/1.2/skin/laypage.css" id="laypagecss">
</head>
<body>
<div>
<div class="pl-5 pr-5 pt-20">
<div class="div_upload_detail">
<div class="uploader-list-container">
<div class="queueList">
<div id="dndArea" style="background: url(../lib/webuploader/0.1.5/images/image.png) center 15px no-repeat;" class="placeholder">
<div id="filePicker-2"></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" style="line-height: 30px">
<div id="filePicker2"></div>
<div class="uploadBtn" style="background-color: #5a98de;">开始上传</div>
</div>
</div>
</div>
<div class="div_limit_text pt-10">文件必须小于15M。 允许的文件类型: png gif jpg jpeg</div>
</div>
</div>
</div>
<script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../lib/layer/2.1/layer.js"></script>
<script type="text/javascript" src="../lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="../static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="../static/h-ui.admin/js/H-ui.admin.js"></script>
<script type="text/javascript" src="../lib/icheck/jquery.icheck.min.js"></script>
<script type="text/javascript" src="../lib/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="../lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="../js/jquery-labelauty.js"></script>
<script type="text/javascript" src="../lib/webuploader/0.1.5/webuploader.min.js"></script>
<script type="text/javascript" src="../lib/webuploader/0.1.5/image-upload/upload.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/hmac-sha1.js"></script>
<script type="text/javascript" src="../js/jbase64.js"></script>
<script type="application/javascript">
/* 综合功能逻辑script */
var cache;//所有国家或地区
//页面刷新加载方法
window.onload = function(){
request();
};
//获取图片上传 传递的参数
function request() {
var url = location.href;
var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
var paraObj = {};
for (i = 0; j = paraString[i]; i++) {
paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
}
uploadBoxState = noNull(paraObj.state);//重新为上传状态赋值
}
</script>
</body>
</html>引入的upload.js文件如下
(function( $ ){
// 当domReady的时候开始初始化
$(function() {
var $wrap = $('.uploader-list-container'),
// 图片容器
$queue = $( '<ul class="filelist"></ul>' )
.appendTo( $wrap.find( '.queueList' ) ),
// 状态栏，包括进度和控制按钮
$statusBar = $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, done.
state = 'pedding',
// 所有文件的进度信息，key为file id
percentages = {},
// 判断浏览器是否支持图片的base64
isSupportBase64 = ( function() {
var data = new Image();
var support = true;
data.onload = data.onerror = function() {
if( this.width != 1 || this.height != 1 ) {
support = false;
}
}
data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
return support;
} )(),
// 检测是否已经安装flash，检测flash的版本
flashVersion = ( function() {
var version;
try {
version = navigator.plugins[ 'Shockwave Flash' ];
version = version.description;
} catch ( ex ) {
try {
version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash')
.GetVariable('$version');
} catch ( ex2 ) {
version = '0.0';
}
}
version = version.match( /\d+/g );
return parseFloat( version[ 0 ] + '.' + version[ 1 ], 10 );
} )(),
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('flash') && WebUploader.browser.ie ) {
// flash 安装了但是版本过低。
if (flashVersion) {
(function(container) {
window['expressinstallcallback'] = function( state ) {
switch(state) {
case 'Download.Cancelled':
alert('您取消了更新！')
break;
case 'Download.Failed':
alert('安装失败')
break;
default:
alert('安装已成功，请刷新！');
break;
}
delete window['expressinstallcallback'];
};
var swf = 'expressInstall.swf';
// insert flash object
var html = '<object type="application/' +
'x-shockwave-flash" data="' + swf + '" ';
if (WebUploader.browser.ie) {
html += 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" ';
}
html += 'width="100%" height="100%" style="outline:0">' +
'<param name="movie" value="' + swf + '" />' +
'<param name="wmode" value="transparent" />' +
'<param name="allowscriptaccess" value="always" />' +
'</object>';
container.html(html);
})($wrap);
// 压根就没有安转。
} else {
$wrap.html('<a href="http://www.adobe.com/go/getflashplayer" target="_blank" border="0"><img alt="get flash player" src="http://www.adobe.com/macromedia/style_guide/images/160x41_Get_Flash_Player.jpg" /></a>');
}
return;
} else if (!WebUploader.Uploader.support()) {
alert( 'Web Uploader 不支持您的浏览器！');
return;
}
// 实例化
uploader = WebUploader.create({
pick: {//{Selector, Object} [可选] [默认值：undefined] 指定选择文件的按钮容器，不指定则不创建按钮。
id: '#filePicker-2',//{Seletor|dom} 指定选择文件的按钮容器，不指定则不创建按钮。
label: '点击选择图片',//{String} 指定按钮文字。
multiple:true//{Boolean} 是否开起同时选择多个文件能力。
},
formData: {//{Object} [可选] [默认值：{}] 文件上传请求的参数表，每次发送都会发送此对象中的参数。
apkFile: '',
},
compress: null,//初始状态图片上传前不会压缩
dnd: '#dndArea',//{Selector} [可选] [默认值：undefined] 指定Drag And Drop拖拽的容器，如果不指定，则不启动。
paste: '#uploader',//{Selector} [可选] [默认值：undefined] 指定监听paste事件的容器，如果不指定，不启用此功能。此功能为通过粘贴来添加截屏的图片。
swf: '../Uploader.swf',
fileVal:'userAvatar',
chunked: false,//{Boolean} [可选] [默认值：false] 是否要分片处理大文件上传。
chunkSize: 15 * 1024 * 1024,//{Boolean} [可选] [默认值：5242880] 5M
method: 'POST',//{Object} [可选] [默认值：'POST'] 文件上传方式，POST或者GET。
sendAsBinary: true,//{Object} [可选] [默认值：false] 是否已二进制的流的方式发送文件，这样整个上传内容php://input都为文件内容， 其他参数在$_GET数组中。
server: API + uploadApk,
// runtimeOrder: 'flash',
//accept: {//{Arroy} [可选] [默认值：null] 指定接受哪些类型的文件。 由于目前还有ext转mimeType表，所以这里需要分开指定。
// title: 'Images',//{String} 文字描述
// extensions: 'gif,jpg,jpeg,bmp,png',//{String} 允许的文件后缀，不带点，多个用逗号分割。
// mimeTypes: 'image/*'//{String} 多个用逗号分割。
//},
// 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
disableGlobalDnd: true,//{Selector} [可选] [默认值：false] 是否禁掉整个页面的拖拽功能，如果不禁用，图片拖进来的时候会默认被浏览器打开。
fileNumLimit: 300,//{int} [可选] [默认值：undefined] 验证文件总数量, 超出则不允许加入队列。
uploadResponse: 200 * 1024 * 1024, // 200 M {int} [可选] [默认值：undefined] 验证文件总大小是否超出限制, 超出则不允许加入队列。
fileSingleSizeLimit: 10 * 1024 * 1024 // 10 M {int} [可选] [默认值：undefined]验证单个文件大小是否超出限制, 超出则不允许加入队列。
});
//上传前的数据处理
uploader.on('uploadBeforeSend', function(block, data) {
// block为分块数据。
// file为分块对应的file对象。
var file = block.file;
//var signature = getSignature(map);
//var fileName = $(".webuploader-element-invisible").val()
data = $.extend( data, {
apkFile:file.name//文件名
});
if(block.chunks>1){ //文件大于chunksize 分片上传
data.isChunked = true;
}else{
data.isChunked = false;
}
});
// 拖拽时不接受 js, txt 文件。
uploader.on( 'dndAccept', function( items ) {
var denied = false,
len = items.length,
i = 0,
// 修改js类型
unAllowed = 'text/plain;application/javascript ';
for ( ; i < len; i++ ) {
// 如果在列表里面
if ( ~unAllowed.indexOf( items[ i ].type ) ) {
denied = true;
break;
}
}
return !denied;
});
uploader.on('dialogOpen', function() {
console.log('here');
});
// uploader.on('filesQueued', function() {
// uploader.sort(function( a, b ) {
// if ( a.name < b.name )
// return -1;
// if ( a.name > b.name )
// return 1;
// return 0;
// });
// });
// 添加“添加文件”的按钮，
uploader.addButton({
id: '#filePicker2',
label: '继续添加'
});
uploader.on('ready', function() {
window.uploader = uploader;
});
//服务请求完成时是返回方法
uploader.on( 'uploadSuccess', function( file, response ) {
uploadResponse = JSON.parse(response);//response 接口返回数据(图片Id)
if(uploadResponse.success=="true"){
//uploadResponse = (uploadResponse.fileName).substring(13,uploadResponse.fileName.length);//图片名赋值
uploadResponse = uploadResponse.fileName;//图片名赋值
uploadBoxState = localStorage.getItem("dmy_management_uploadBoxState");//全局变量 点击上传时的状态（区别是哪个按钮点击的上传）
//预览图片方法
function previewPictures(number){
var $str = "";
$str += "<li class='maskWraper div_i_b picture_size pl-10' οnmοusedοwn='longPressEvent()' οnmοuseοver='floatingLayer()'>";
$str += "<img src='"+ API + originalPic + uploadResponse + "' title='" + uploadResponse + "' class='picture_size'>";
$str += "<a class='maskBar text-c ml-10'>" +
"<i class='Hui-iconfont' title='删除' οnclick='deletePicture($(this))'></i>" +
"<i class='Hui-iconfont ml-10' title='原图' οnclick='showOriginalPicture($(this))' data-value='"+ API + originalPic + uploadResponse + "'></i>" +
"</a>";
$str += "</li>";
$("#pictureAdd"+ number,parent.document).append($str);
}
if(uploadBoxState==1||uploadBoxState==2||uploadBoxState==3||uploadBoxState==4||uploadBoxState==5){
previewPictures(uploadBoxState);
}
layer.msg('上传成功！', {icon : 6,time : 2000});
}else if(uploadResponse.success=="false"){
layer.open({title: '温馨提示',content:"图片上传失败！",icon : 0});
}
});
// 当有文件添加进来时执行，负责view的创建
function addFile( file ) {
picFileName = file.name;
var $li = $( '<li id="' + file.id + '">' +
'<p class="title">' + file.name + '</p>' +
'<p class="imgWrap"></p>'+
'<p class="progress"><span></span></p>' +
'</li>' ),
$btns = $('<div class="file-panel">' +
'<span class="cancel">删除</span>' +
'<span class="rotateRight">向右旋转</span>' +
'<span class="rotateLeft">向左旋转</span></div>').appendTo( $li ),
$prgress = $li.find('p.progress span'),
$wrap = $li.find( 'p.imgWrap' ),
$info = $('<p class="error"></p>'),
showError = function( code ) {
switch( code ) {
case 'exceed_size':
text = '文件大小超出';
break;
case 'interrupt':
text = '上传暂停';
break;
default:
text = '上传失败，请重试';
break;
}
$info.text( text ).appendTo( $li );
};
if ( file.getStatus() === 'invalid' ) {
showError( file.statusText );
} else {
// @todo lazyload
$wrap.text( '预览中' );
uploader.makeThumb( file, function( error, src ) {
var img;
if ( error ) {
$wrap.text( '不能预览' );
return;
}
if( isSupportBase64 ) {
img = $('<img src="'+src+'">');
$wrap.empty().append( img );
} else {
$.ajax('../server/preview.php', {
method: 'POST',
data: src,
dataType:'json'
}).done(function( response ) {
if (response.result) {
img = $('<img src="'+response.result+'">');
$wrap.empty().append( img );
} else {
$wrap.text("预览出错");
}
});
}
}, thumbnailWidth, thumbnailHeight );
percentages[ file.id ] = [ file.size, 0 ];
file.rotation = 0;
}
file.on('statuschange', function( cur, prev ) {
if ( prev === 'progress' ) {
$prgress.hide().width(0);
} else if ( prev === 'queued' ) {
$li.off( 'mouseenter mouseleave' );
$btns.remove();
}
// 成功
if ( cur === 'error' || cur === 'invalid' ) {
console.log( file.statusText );
showError( file.statusText );
percentages[ file.id ][ 1 ] = 1;
} else if ( cur === 'interrupt' ) {
showError( 'interrupt' );
} else if ( cur === 'queued' ) {
percentages[ file.id ][ 1 ] = 0;
} else if ( cur === 'progress' ) {
$info.remove();
$prgress.css('display', 'block');
} else if ( cur === 'complete' ) {
$li.append( '<span class="success"></span>' );
}
$li.removeClass( 'state-' + prev ).addClass( 'state-' + cur );
});
$li.on( 'mouseenter', function() {
$btns.stop().animate({height: 30});
});
$li.on( 'mouseleave', function() {
$btns.stop().animate({height: 0});
});
$btns.on( 'click', 'span', function() {
var index = $(this).index(),
deg;
switch ( index ) {
case 0:
uploader.removeFile( file );
return;
case 1:
file.rotation += 90;
break;
case 2:
file.rotation -= 90;
break;
}
if ( supportTransition ) {
deg = 'rotate(' + file.rotation + 'deg)';
$wrap.css({
'-webkit-transform': deg,
'-mos-transform': deg,
'-o-transform': deg,
'transform': deg
});
} else {
$wrap.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')');
// use jquery animate to rotation
// $({
// rotation: rotation
// }).animate({
// rotation: file.rotation
// }, {
// easing: 'linear',
// step: function( now ) {
// now = now * Math.PI / 180;
// var cos = Math.cos( now ),
// sin = Math.sin( now );
// $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')");
// }
// });
}
});
$li.appendTo( $queue );
}
// 负责view的销毁
function removeFile( file ) {
var $li = $('#'+file.id);
delete percentages[ file.id ];
updateTotalProgress();
$li.off().find('.file-panel').off().end().remove();
}
function updateTotalProgress() {
var loaded = 0,
total = 0,
spans = $progress.children(),
percent;
$.each( percentages, function( k, v ) {
total += v[ 0 ];
loaded += v[ 0 ] * v[ 1 ];
} );
percent = total ? loaded / total : 0;
spans.eq( 0 ).text( Math.round( percent * 100 ) + '%' );
spans.eq( 1 ).css( 'width', Math.round( percent * 100 ) + '%' );
updateStatus();
}
function updateStatus() {
var text = '', stats;
if ( state === 'ready' ) {
text = '选中' + fileCount + '张图片，共' +
WebUploader.formatSize( fileSize ) + '。';
} else if ( state === 'confirm' ) {
stats = uploader.getStats();
if ( stats.uploadFailNum ) {
text = '已成功上传' + stats.successNum+ '张照片至投票管理系统相册，'+
stats.uploadFailNum + '张照片上传失败，<a class="retry" href="#">重新上传</a>失败图片或<a class="ignore" href="#">忽略</a>'
}
} else {
stats = uploader.getStats();
text = '共' + fileCount + '张（' +
WebUploader.formatSize( fileSize ) +
'），已上传' + stats.successNum + '张';
if ( stats.uploadFailNum ) {
text += '，失败' + stats.uploadFailNum + '张';
}
}
$info.html( text );
}
function setState( val ) {
var file, stats;
if ( val === state ) {
return;
}
$upload.removeClass( 'state-' + state );
$upload.addClass( 'state-' + val );
state = val;
switch ( state ) {
case 'pedding':
$placeHolder.removeClass( 'element-invisible' );
$queue.hide();
$statusBar.addClass( 'element-invisible' );
uploader.refresh();
break;
case 'ready':
$placeHolder.addClass( 'element-invisible' );
$( '#filePicker2' ).removeClass( 'element-invisible');
$queue.show();
$statusBar.removeClass('element-invisible');
uploader.refresh();
break;
case 'uploading':
$( '#filePicker2' ).addClass( 'element-invisible' );
$progress.show();
$upload.text( '暂停上传' );
break;
case 'paused':
$progress.show();
$upload.text( '继续上传' );
break;
case 'confirm':
$progress.hide();
$( '#filePicker2' ).removeClass( 'element-invisible' );
$upload.text( '开始上传' );
stats = uploader.getStats();
if ( stats.successNum && !stats.uploadFailNum ) {
setState( 'finish' );
return;
}
break;
case 'finish':
stats = uploader.getStats();
if ( stats.successNum ) {
//layer.msg('上传成功', {icon : 6,time : 2000});
//layer.open({title: '温馨提示',content:'上传成功',icon : 6});
} else {
// 没有成功的图片，重设
state = 'done';
location.reload();
}
break;
}
updateStatus();
}
uploader.onUploadProgress = function( file, percentage ) {
var $li = $('#'+file.id),
$percent = $li.find('.progress span');
$percent.css( 'width', percentage * 100 + '%' );
percentages[ file.id ][ 1 ] = percentage;
updateTotalProgress();
};
uploader.onFileQueued = function( file ) {
fileCount++;
fileSize += file.size;
if ( fileCount === 1 ) {
$placeHolder.addClass( 'element-invisible' );
$statusBar.show();
}
addFile( file );
setState( 'ready' );
updateTotalProgress();
};
uploader.onFileDequeued = function( file ) {
fileCount--;
fileSize -= file.size;
if ( !fileCount ) {
setState( 'pedding' );
}
removeFile( file );
updateTotalProgress();
};
uploader.on( 'all', function( type ) {
var stats;
switch( type ) {
case 'uploadFinished':
setState( 'confirm' );
break;
case 'startUpload':
setState( 'uploading' );
break;
case 'stopUpload':
setState( 'paused' );
break;
}
});
uploader.onError = function( code ) {
//alert( 'Eroor: ' + code );
layer.open({title: '温馨提示',content:code,icon : 0});
};
$upload.on('click', function() {
if ( $(this).hasClass( 'disabled' ) ) {
return false;
}
if ( state === 'ready' ) {
uploader.upload();
} else if ( state === 'paused' ) {
uploader.upload();
} else if ( state === 'uploading' ) {
uploader.stop();
}
});
$info.on( 'click', '.retry', function() {
uploader.retry();
} );
$info.on( 'click', '.ignore', function() {
//alert( 'todo' );
history.go(0);
} );
$upload.addClass( 'state-' + state );
updateTotalProgress();
});
})( jQuery );后台 代码 及配置 参考 成功版本
后台的 原版写法如下
package com.weidingplus.mall.common;
import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.apache.commons.io.FileUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import com.weidingplus.framework.common.ComConst;
import com.weidingplus.framework.web.entity.JsonResponse;
import com.weidingplus.framework.web.session.SUserInfo;
import com.weidingplus.mall.web.mybatis.pojo.WdpVote;
@Controller
public class UpLoadFileController {
// @ResponseBody
// @RequestMapping(value = "/uploadApkqq", method = RequestMethod.POST)
// public JsonResponse uploadApk(@RequestBody(required = false) MultipartFile apkFile,
// HttpServletRequest request, HttpServletResponse response) {
// Map<String, String> resMap = new HashMap<String, String>();
// // 获取保存的路径，
// String path = Thread.currentThread().getContextClassLoader().getResource("").getPath() + "../../upload/";
// // 创建文件夹
// File file = new File(path);
// if (!file.exists() && !file.isDirectory()) {
// file.mkdir();
// }
// if (apkFile.isEmpty()) {
// // 未选择文件
// resMap.put("status", "parm_is_empty");
// } else {
// // 文件原名称
// String originFileName = apkFile.getOriginalFilename();
// try {
//
// // 这里使用Apache的FileUtils方法来进行保存
// FileUtils.copyInputStreamToFile(apkFile.getInputStream(), new File(path, originFileName));
// resMap.put("status", "ok");
// resMap.put("file_name", originFileName);
// resMap.put("media_id", "media_id");
// } catch (IOException e) {
// System.out.println("文件上传失败");
// resMap.put("status", "ng");
// e.printStackTrace();
// }
// }
// return JsonResponse.getInstanceSuccess(resMap);
// }
@RequestMapping(value = "/uploadApk")
public @ResponseBody Object uploadApk(@RequestParam(value = "apkFile") MultipartFile apkFile,
HttpServletRequest request, HttpServletResponse response) {
Map<String, String> resMap = new HashMap<String, String>();
// 获取保存的路径，
String path = Thread.currentThread().getContextClassLoader().getResource("").getPath() + "../../upload/";
// 创建文件夹
File file = new File(path);
if (!file.exists() && !file.isDirectory()) {
file.mkdir();
}
if (apkFile.isEmpty()) {
// 未选择文件
resMap.put("status", "parm_is_empty");
} else {
// 文件原名称
String originFileName = apkFile.getOriginalFilename();
try {
// 这里使用Apache的FileUtils方法来进行保存
FileUtils.copyInputStreamToFile(apkFile.getInputStream(), new File(path, originFileName));
resMap.put("status", "ok");
resMap.put("file_name", originFileName);
resMap.put("media_id", "media_id");
} catch (IOException e) {
System.out.println("文件上传失败");
resMap.put("status", "ng");
e.printStackTrace();
}
}
return resMap;
}
}
另一个页面 可忽略 pictureUploadOne.html
<!DOCTYPE html>
<html>
<head>
<!-- head begin -->
<meta charset="utf-8">
<meta name="zsc" content="pictureUpload.html" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]-->
<script type="text/javascript" src="../lib/html5.js"></script>
<script type="text/javascript" src="../lib/respond.min.js"></script>
<!--<script type="text/javascript" src="../lib/PIE_IE678.js"></script>-->
<![endif]-->
<link rel="stylesheet" type="text/css" href="../static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="../lib/Hui-iconfont/1.0.7/iconfont.css" />
<link rel="stylesheet" type="text/css" href="../lib/icheck/icheck.css" />
<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/style.css" />
<link rel="stylesheet" type="text/css" href="../lib/webuploader/0.1.5/webuploader.css">
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<![endif]-->
<!--<link href="/dmy/web/ui/css/H-ui.login.css" rel="stylesheet" type="text/css">-->
<link href="../lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css">
<link href="../lib/bootstrap-Switch/bootstrapSwitch.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../css/jquery-labelauty.css">
<![endif]-->
<title>多米游 - 图片上传</title>
<meta name="keywords" content="">
<meta name="description" content="">
<!-- head end -->
<link rel="stylesheet" type="text/css" href="../lib/layer/2.1/skin/layer.css" id="layui_layer_skinlayercss">
<link rel="stylesheet" type="text/css" href="../lib/My97DatePicker/skin/WdatePicker.css">
<link rel="stylesheet" type="text/css" href="../lib/layer/2.1/skin/layer.ext.css" id="layui_layer_skinlayerextcss">
<link rel="stylesheet" type="text/css" href="../lib/laypage/1.2/skin/laypage.css" id="laypagecss">
</head>
<body>
<div>
<div class="pl-5 pr-5 pt-20">
<div class="div_upload_detail">
<div class="uploader-list-container">
<div class="queueList">
<div id="dndArea" style="background: url(../lib/webuploader/0.1.5/images/image.png) center 15px no-repeat;" class="placeholder">
<div id="filePicker-2"></div>
<p>或将照片拖到这里，进行单张上传！</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" style="line-height: 30px">
<div id="filePicker2"></div>
<div class="uploadBtn" style="background-color: #5a98de;">开始上传</div>
</div>
</div>
</div>
<div class="div_limit_text pt-10">文件必须小于15M。 允许的文件类型: png gif jpg jpeg</div>
</div>
</div>
</div>
<script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../lib/layer/2.1/layer.js"></script>
<script type="text/javascript" src="../lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="../static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="../static/h-ui.admin/js/H-ui.admin.js"></script>
<script type="text/javascript" src="../lib/icheck/jquery.icheck.min.js"></script>
<script type="text/javascript" src="../lib/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="../lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="../js/jquery-labelauty.js"></script>
<script type="text/javascript" src="../lib/webuploader/0.1.5/webuploader.min.js"></script>
<script type="text/javascript" src="../lib/webuploader/0.1.5/image-upload/uploadOne.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/hmac-sha1.js"></script>
<script type="text/javascript" src="../js/jbase64.js"></script>
<script type="application/javascript">
//页面刷新加载方法
// window.onload = function(){
// request();
// };
//获取图片上传 传递的参数
// function request() {
// var url = location.href;
// var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
// var paraObj = {};
// for (i = 0; j = paraString[i]; i++) {
// paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
// }
// uploadBoxState = noNull(paraObj.state);//重新为上传状态赋值
// }
</script>
</body>
</html>引入的 uploadOne.js
(function( $ ){
// 当domReady的时候开始初始化
$(function() {
var $wrap = $('.uploader-list-container'),
// 图片容器
$queue = $( '<ul class="filelist"></ul>' )
.appendTo( $wrap.find( '.queueList' ) ),
// 状态栏，包括进度和控制按钮
$statusBar = $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, done.
state = 'pedding',
// 所有文件的进度信息，key为file id
percentages = {},
// 判断浏览器是否支持图片的base64
isSupportBase64 = ( function() {
var data = new Image();
var support = true;
data.onload = data.onerror = function() {
if( this.width != 1 || this.height != 1 ) {
support = false;
}
}
data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
return support;
} )(),
// 检测是否已经安装flash，检测flash的版本
flashVersion = ( function() {
var version;
try {
version = navigator.plugins[ 'Shockwave Flash' ];
version = version.description;
} catch ( ex ) {
try {
version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash')
.GetVariable('$version');
} catch ( ex2 ) {
version = '0.0';
}
}
version = version.match( /\d+/g );
return parseFloat( version[ 0 ] + '.' + version[ 1 ], 10 );
} )(),
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('flash') && WebUploader.browser.ie ) {
// flash 安装了但是版本过低。
if (flashVersion) {
(function(container) {
window['expressinstallcallback'] = function( state ) {
switch(state) {
case 'Download.Cancelled':
alert('您取消了更新！')
break;
case 'Download.Failed':
alert('安装失败')
break;
default:
alert('安装已成功，请刷新！');
break;
}
delete window['expressinstallcallback'];
};
var swf = 'expressInstall.swf';
// insert flash object
var html = '<object type="application/' +
'x-shockwave-flash" data="' + swf + '" ';
if (WebUploader.browser.ie) {
html += 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" ';
}
html += 'width="100%" height="100%" style="outline:0">' +
'<param name="movie" value="' + swf + '" />' +
'<param name="wmode" value="transparent" />' +
'<param name="allowscriptaccess" value="always" />' +
'</object>';
container.html(html);
})($wrap);
// 压根就没有安转。
} else {
$wrap.html('<a href="http://www.adobe.com/go/getflashplayer" target="_blank" border="0"><img alt="get flash player" src="http://www.adobe.com/macromedia/style_guide/images/160x41_Get_Flash_Player.jpg" /></a>');
}
return;
} else if (!WebUploader.Uploader.support()) {
alert( 'Web Uploader 不支持您的浏览器！');
return;
}
// 实例化
uploader = WebUploader.create({
pick: {//{Selector, Object} [可选] [默认值：undefined] 指定选择文件的按钮容器，不指定则不创建按钮。
id: '#filePicker-2',//{Seletor|dom} 指定选择文件的按钮容器，不指定则不创建按钮。
label: '点击选择图片',//{String} 指定按钮文字。
multiple:false//{Boolean} 是否开起同时选择多个文件能力。
},
formData: {//{Object} [可选] [默认值：{}] 文件上传请求的参数表，每次发送都会发送此对象中的参数。
userId: userId,
password: password,
fileName: '',
signature: ''
},
compress: null,//初始状态图片上传前不会压缩
dnd: '#dndArea',//{Selector} [可选] [默认值：undefined] 指定Drag And Drop拖拽的容器，如果不指定，则不启动。
paste: '#uploader',//{Selector} [可选] [默认值：undefined] 指定监听paste事件的容器，如果不指定，不启用此功能。此功能为通过粘贴来添加截屏的图片。
swf: '../Uploader.swf',
fileVal:'userAvatar',
chunked: false,//{Boolean} [可选] [默认值：false] 是否要分片处理大文件上传。
chunkSize: 15 * 1024 * 1024,//{Boolean} [可选] [默认值：5242880] 5M
method: 'POST',//{Object} [可选] [默认值：'POST'] 文件上传方式，POST或者GET。
sendAsBinary: true,//{Object} [可选] [默认值：false] 是否已二进制的流的方式发送文件，这样整个上传内容php://input都为文件内容， 其他参数在$_GET数组中。
server: API + localStorage.getItem("dmy_management_uploadPic"),
// runtimeOrder: 'flash',
//accept: {//{Arroy} [可选] [默认值：null] 指定接受哪些类型的文件。 由于目前还有ext转mimeType表，所以这里需要分开指定。
// title: 'Images',//{String} 文字描述
// extensions: 'gif,jpg,jpeg,bmp,png',//{String} 允许的文件后缀，不带点，多个用逗号分割。
// mimeTypes: 'image/*'//{String} 多个用逗号分割。
//},
// 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
disableGlobalDnd: true,//{Selector} [可选] [默认值：false] 是否禁掉整个页面的拖拽功能，如果不禁用，图片拖进来的时候会默认被浏览器打开。
fileNumLimit: 300,//{int} [可选] [默认值：undefined] 验证文件总数量, 超出则不允许加入队列。
uploadResponse: 200 * 1024 * 1024, // 200 M {int} [可选] [默认值：undefined] 验证文件总大小是否超出限制, 超出则不允许加入队列。
fileSingleSizeLimit: 10 * 1024 * 1024 // 10 M {int} [可选] [默认值：undefined]验证单个文件大小是否超出限制, 超出则不允许加入队列。
});
//上传前的数据处理
uploader.on('uploadBeforeSend', function(block, data) {
// block为分块数据。
// file为分块对应的file对象。
var file = block.file;
var map = {
userId:userId,
password:password,
fileName:decodeURI(file.name)
};
var signature = getSignature(map);
data = $.extend( data, {
fileName: file.name,
signature: signature,
});
if(block.chunks>1){ //文件大于chunksize 分片上传
data.isChunked = true;
}else{
data.isChunked = false;
}
});
// 拖拽时不接受 js, txt 文件。
uploader.on( 'dndAccept', function( items ) {
var denied = false,
len = items.length,
i = 0,
// 修改js类型
unAllowed = 'text/plain;application/javascript ';
for ( ; i < len; i++ ) {
// 如果在列表里面
if ( ~unAllowed.indexOf( items[ i ].type ) ) {
denied = true;
break;
}
}
return !denied;
});
uploader.on('dialogOpen', function() {
console.log('here');
});
// uploader.on('filesQueued', function() {
// uploader.sort(function( a, b ) {
// if ( a.name < b.name )
// return -1;
// if ( a.name > b.name )
// return 1;
// return 0;
// });
// });
// 添加“添加文件”的按钮，
//uploader.addButton({
// id: '#filePicker2',
// label: '继续添加'
//});
uploader.on('ready', function() {
window.uploader = uploader;
});
//服务请求完成时是返回方法
uploader.on( 'uploadSuccess', function( file, response ) {
uploadResponse = JSON.parse(response);//response 接口返回数据(图片Id)
if(uploadResponse.success=="true"){
//uploadResponse = (uploadResponse.fileName).substring(13,uploadResponse.fileName.length);//图片名赋值
uploadResponse = uploadResponse.fileName;//图片名赋值
uploadBoxState = localStorage.getItem("dmy_management_uploadBoxState");//全局变量 点击上传时的状态（区别是哪个按钮点击的上传）
uploadPicPreviewState = localStorage.getItem("dmy_management_uploadPicPreviewState");//全局变量 上传时及上传成功后的状态（区别图片预览路径的状态）
//预览图片方法
function previewPictures(number){
var $str = "";
$str += "<span class='maskWraper character_picture_size div_i_b pt-5 pb-5 pl-5 pr-5' style='background-color: #ebebeb' οnmοusedοwn='longPressEvent()' οnmοuseοver='floatingLayer()'>";
if(uploadPicPreviewState=="pictureMatter"){
$str += "<img src='"+ API + materialPic + uploadResponse + "' title='" + uploadResponse + "' class='character_picture_size'>";
localStorage.removeItem("dmy_management_uploadPicPreviewState");//清除上传时及上传成功后的状态（区别图片预览路径的状态）
}else{
$str += "<img src='"+ API + originalPic + uploadResponse + "' title='" + uploadResponse + "' class='character_picture_size'>";
}
$str += "<a class='maskBar text-c ml-5 mr-5' style='text-decoration: none'>" +
"<i class='Hui-iconfont' title='删除' οnclick='deletePicture($(this))'></i>" +
"<i class='Hui-iconfont ml-10' title='原图' οnclick='showOriginalPicture($(this))' data-value='"+ API + originalPic + uploadResponse + "'></i>" +
"</a>";
$str += "</span>";
var picId = "pictureOneAdd" + number + " " + "span";
$("#"+ picId,parent.document).remove();
$("#pictureOneAdd"+ number,parent.document).append($str);
}
if(uploadBoxState==1||uploadBoxState==2||uploadBoxState==3){
previewPictures(uploadBoxState);
}
layer.msg('上传成功！', {icon : 6,time : 2000});
}else if(uploadResponse.success=="false"){
layer.open({title: '温馨提示',content:"图片上传失败！",icon : 0});
}
});
// 当有文件添加进来时执行，负责view的创建
function addFile( file ) {
picFileName = file.name;
var $li = $( '<li id="' + file.id + '">' +
'<p class="title">' + file.name + '</p>' +
'<p class="imgWrap"></p>'+
'<p class="progress"><span></span></p>' +
'</li>' ),
$btns = $('<div class="file-panel">' +
'<span class="cancel">删除</span>' +
'<span class="rotateRight">向右旋转</span>' +
'<span class="rotateLeft">向左旋转</span></div>').appendTo( $li ),
$prgress = $li.find('p.progress span'),
$wrap = $li.find( 'p.imgWrap' ),
$info = $('<p class="error"></p>'),
showError = function( code ) {
switch( code ) {
case 'exceed_size':
text = '文件大小超出';
break;
case 'interrupt':
text = '上传暂停';
break;
default:
text = '上传失败，请重试';
break;
}
$info.text( text ).appendTo( $li );
};
if ( file.getStatus() === 'invalid' ) {
showError( file.statusText );
} else {
// @todo lazyload
$wrap.text( '预览中' );
uploader.makeThumb( file, function( error, src ) {
var img;
if ( error ) {
$wrap.text( '不能预览' );
return;
}
if( isSupportBase64 ) {
img = $('<img src="'+src+'">');
$wrap.empty().append( img );
} else {
$.ajax('../server/preview.php', {
method: 'POST',
data: src,
dataType:'json'
}).done(function( response ) {
if (response.result) {
img = $('<img src="'+response.result+'">');
$wrap.empty().append( img );
} else {
$wrap.text("预览出错");
}
});
}
}, thumbnailWidth, thumbnailHeight );
percentages[ file.id ] = [ file.size, 0 ];
file.rotation = 0;
}
file.on('statuschange', function( cur, prev ) {
if ( prev === 'progress' ) {
$prgress.hide().width(0);
} else if ( prev === 'queued' ) {
$li.off( 'mouseenter mouseleave' );
$btns.remove();
}
// 成功
if ( cur === 'error' || cur === 'invalid' ) {
console.log( file.statusText );
showError( file.statusText );
percentages[ file.id ][ 1 ] = 1;
} else if ( cur === 'interrupt' ) {
showError( 'interrupt' );
} else if ( cur === 'queued' ) {
percentages[ file.id ][ 1 ] = 0;
} else if ( cur === 'progress' ) {
$info.remove();
$prgress.css('display', 'block');
} else if ( cur === 'complete' ) {
$li.append( '<span class="success"></span>' );
}
$li.removeClass( 'state-' + prev ).addClass( 'state-' + cur );
});
$li.on( 'mouseenter', function() {
$btns.stop().animate({height: 30});
});
$li.on( 'mouseleave', function() {
$btns.stop().animate({height: 0});
});
$btns.on( 'click', 'span', function() {
var index = $(this).index(),
deg;
switch ( index ) {
case 0:
uploader.removeFile( file );
return;
case 1:
file.rotation += 90;
break;
case 2:
file.rotation -= 90;
break;
}
if ( supportTransition ) {
deg = 'rotate(' + file.rotation + 'deg)';
$wrap.css({
'-webkit-transform': deg,
'-mos-transform': deg,
'-o-transform': deg,
'transform': deg
});
} else {
$wrap.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')');
// use jquery animate to rotation
// $({
// rotation: rotation
// }).animate({
// rotation: file.rotation
// }, {
// easing: 'linear',
// step: function( now ) {
// now = now * Math.PI / 180;
// var cos = Math.cos( now ),
// sin = Math.sin( now );
// $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')");
// }
// });
}
});
$li.appendTo( $queue );
}
// 负责view的销毁
function removeFile( file ) {
var $li = $('#'+file.id);
delete percentages[ file.id ];
updateTotalProgress();
$li.off().find('.file-panel').off().end().remove();
}
function updateTotalProgress() {
var loaded = 0,
total = 0,
spans = $progress.children(),
percent;
$.each( percentages, function( k, v ) {
total += v[ 0 ];
loaded += v[ 0 ] * v[ 1 ];
} );
percent = total ? loaded / total : 0;
spans.eq( 0 ).text( Math.round( percent * 100 ) + '%' );
spans.eq( 1 ).css( 'width', Math.round( percent * 100 ) + '%' );
updateStatus();
}
function updateStatus() {
var text = '', stats;
if ( state === 'ready' ) {
text = '选中' + fileCount + '张图片，共' +
WebUploader.formatSize( fileSize ) + '。';
} else if ( state === 'confirm' ) {
stats = uploader.getStats();
if ( stats.uploadFailNum ) {
text = '已成功上传' + stats.successNum+ '张照片至多米游相册，'+
stats.uploadFailNum + '张照片上传失败，<a class="retry" href="#">重新上传</a>失败图片或<a class="ignore" href="#">忽略</a>'
}
} else {
stats = uploader.getStats();
text = '共' + fileCount + '张（' +
WebUploader.formatSize( fileSize ) +
'），已上传' + stats.successNum + '张';
if ( stats.uploadFailNum ) {
text += '，失败' + stats.uploadFailNum + '张';
}
}
$info.html( text );
}
function setState( val ) {
var file, stats;
if ( val === state ) {
return;
}
$upload.removeClass( 'state-' + state );
$upload.addClass( 'state-' + val );
state = val;
switch ( state ) {
case 'pedding':
$placeHolder.removeClass( 'element-invisible' );
$queue.hide();
$statusBar.addClass( 'element-invisible' );
uploader.refresh();
break;
case 'ready':
$placeHolder.addClass( 'element-invisible' );
$( '#filePicker2' ).removeClass( 'element-invisible');
$queue.show();
$statusBar.removeClass('element-invisible');
uploader.refresh();
break;
case 'uploading':
$( '#filePicker2' ).addClass( 'element-invisible' );
$progress.show();
$upload.text( '暂停上传' );
break;
case 'paused':
$progress.show();
$upload.text( '继续上传' );
break;
case 'confirm':
$progress.hide();
$( '#filePicker2' ).removeClass( 'element-invisible' );
$upload.text( '开始上传' );
stats = uploader.getStats();
if ( stats.successNum && !stats.uploadFailNum ) {
setState( 'finish' );
return;
}
break;
case 'finish':
stats = uploader.getStats();
if ( stats.successNum ) {
//layer.msg('上传成功', {icon : 6,time : 2000});
//layer.open({title: '温馨提示',content:'上传成功',icon : 6});
} else {
// 没有成功的图片，重设
state = 'done';
location.reload();
}
break;
}
updateStatus();
}
uploader.onUploadProgress = function( file, percentage ) {
var $li = $('#'+file.id),
$percent = $li.find('.progress span');
$percent.css( 'width', percentage * 100 + '%' );
percentages[ file.id ][ 1 ] = percentage;
updateTotalProgress();
};
uploader.onFileQueued = function( file ) {
fileCount++;
fileSize += file.size;
if ( fileCount === 1 ) {
$placeHolder.addClass( 'element-invisible' );
$statusBar.show();
}
addFile( file );
setState( 'ready' );
updateTotalProgress();
};
uploader.onFileDequeued = function( file ) {
fileCount--;
fileSize -= file.size;
if ( !fileCount ) {
setState( 'pedding' );
}
removeFile( file );
updateTotalProgress();
};
uploader.on( 'all', function( type ) {
var stats;
switch( type ) {
case 'uploadFinished':
setState( 'confirm' );
break;
case 'startUpload':
setState( 'uploading' );
break;
case 'stopUpload':
setState( 'paused' );
break;
}
});
uploader.onError = function( code ) {
//alert( 'Eroor: ' + code );
layer.open({title: '温馨提示',content:code,icon : 0});
};
$upload.on('click', function() {
if ( $(this).hasClass( 'disabled' ) ) {
return false;
}
if ( state === 'ready' ) {
uploader.upload();
} else if ( state === 'paused' ) {
uploader.upload();
} else if ( state === 'uploading' ) {
uploader.stop();
}
});
$info.on( 'click', '.retry', function() {
uploader.retry();
} );
$info.on( 'click', '.ignore', function() {
//alert( 'todo' );
history.go(0);
} );
$upload.addClass( 'state-' + state );
updateTotalProgress();
});
})( jQuery );
473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
